Générateur de rayon de bordure CSS

Coins ronds exactement comme vous voulez — des cartes subtiles aux blobs ludiques.

Comment définir un rayon de bordure CSS

  1. Définissez les coins — ensemble ou un par un.
  2. Ou passez en mode blob et faites glisser les poignées.
  3. Copiez la classe CSS ou Tailwind.

À propos : Générateur de border-radius

Créez des valeurs CSS border-radius visuellement.

Tout fonctionne dans votre navigateur, il est donc instantané et privé. Vos couleurs et paramètres récents sont mémorisés sur cet appareil, et la barre d'adresse conserve votre couleur afin que vous puissiez la partager ou la mettre en signet.

Idéal pour

  • Cartes, boutons et avatars
  • Fond de blob organique
  • Bulles, onglets et feuilles

Conseil : Pourcentages à l'échelle avec l'élément ; px conserve la même courbe à n'importe quelle taille.

Questions fréquentes

Comment puis-je faire une forme blob?

Basculez sur “Fancy blob shape”, faites glisser les 4 poignées le long des bords (ou utilisez les curseurs), ou appuyez sur Random blob. / rayons verticaux.

Comment puis-je faire un cercle ou une pilule?

Un cercle est border-radius: 50% sur un élément carré; une pilule est un très grand rayon (comme 999px) sur un élément large. Les deux sont des presets.

Que signifient les 4 valeurs ?

Ils vont dans le sens des aiguilles d'une montre depuis le coin supérieur gauche : haut gauche, haut droit, bas droit, bas gauche.

Quelle unité devrais-je utiliser?

Pixels pour les coins fixes, % à l'échelle avec l'élément (50% transforme un carré en cercle), ou rem pour suivre la taille de la police.

Pourquoi les coins de mon image ne sont-ils pas arrondis ?

Mettez le rayon sur l'image elle-même, ou sur son conteneur avec débordement: caché, de sorte que l'image est coupée aux coins arrondis.

Outils associés

← Retour à tous les outils