Aller au contenu
ToolFarmToolFarm
Design

Générateur de border radius CSS

Crée un border-radius en CSS avec un aperçu en direct : arrondis chaque coin séparément en pixels ou en pour cent, puis copie le code. Gratuit et dans ton navigateur.

3 min de lecture

À quoi sert cet outil

Générateur de border radius avec un aperçu en direct. Règle les coins en haut à gauche, en haut à droite, en bas à droite et en bas à gauche séparément, passe des pixels au pour cent et regarde une boîte d'exemple s'arrondir en temps réel. La règle border-radius s'affiche prête à copier et tout se passe dans ton navigateur.

À quoi ça vous sert

  • Arrondir les coins d'une carte, d'un bouton ou d'une image sur une landing page.
  • Faire un bouton en forme de pilule en montant les coins en pour cent.
  • Créer une forme asymétrique avec un rayon différent sur chaque coin.
  • Tester les coins avant de coller la règle dans ta feuille de style ou ton thème Tailwind.

Comment l'utiliser

  1. Règle le rayon des coins en haut à gauche et en haut à droite.
  2. Règle le rayon des coins en bas à droite et en bas à gauche.
  3. Choisis les pixels pour un rayon fixe ou le pour cent pour un rayon qui s'adapte à la boîte.
  4. Regarde l'aperçu en direct, puis copie la règle border-radius ci-dessous.

Tout le travail se passe dans votre navigateur. Aucun fichier n'est envoyé à un serveur. Voir plus d'outils dans le même champ.

D'autres outils qu'on utilise souvent dans le même flux.

Design
Design

Générateur de Dégradés CSS

Créez des dégradés CSS en ligne avec un aperçu en direct: linéaire, radial et conique. Copiez le code de votre fond, gratuit et sans envoi.

Populaire
Design

Convertisseur de Couleur: HEX, RGB

Convertissez des couleurs entre HEX, RGB et HSL en ligne. Collez un format et obtenez les autres au passage. Gratuit et dans votre navigateur.

Design

Générateur de Palettes de Couleurs

Générez des palettes harmonieuses à partir de n'importe quelle couleur de base: analogues, complémentaires et plus. Gratuit et prêt à copier.

Design

Vérifier le Contraste de Couleur (WCAG)

Vérifiez le contraste de couleur WCAG entre texte et fond, avec aperçus en direct, verdict réussite ou échec et suggestions accessibles.

Questions fréquentes

Dans quel ordre les quatre coins sont-ils écrits ?

Le résultat utilise l'ordre canonique de CSS : en haut à gauche, en haut à droite, en bas à droite et en bas à gauche. Cet ordre dans le sens des aiguilles d'une montre, en partant du coin en haut à gauche, est celui qu'attend le border-radius en forme longue, donc la règle que tu copies applique chaque valeur au coin que tu as réglé.

Quelle est la différence entre pixels et pour cent ?

Un rayon en pixels garde la même taille quelle que soit la boîte. Un rayon en pour cent est relatif à la boîte, donc 50 pour cent sur chaque coin transforme un carré en cercle et un rectangle en pilule. Choisis le pour cent quand tu veux que l'arrondi s'adapte à l'élément.

Comment faire un cercle parfait ou une pilule ?

Mets tous les coins à 50 pour cent. Sur une boîte carrée cela donne un cercle ; sur une boîte plus large cela donne une pilule ou une capsule. Passe d'abord l'unité en pour cent, puis monte les coins à 50.

Puis-je utiliser le CSS généré tel quel ?

Oui. Le résultat est une déclaration border-radius complète que tu peux coller directement dans ta feuille de style, dans une variable CSS ou dans une valeur arbitraire Tailwind. Elle écrit toujours les quatre coins en forme longue, donc chaque coin garde la valeur que tu as choisie.