Générateur de border-radius CSS
Générez un border-radius CSS avec coins indépendants, rayons X/Y elliptiques, unités px ou % et préréglages blob. Produit la notation abrégée valide la plus courte.
Préréglages
Coins
Réglages de l’aperçu
Aperçu
border-radius: 16px;
Outils Connexes
Voir ToutQu'est-ce que Générateur de border-radius ?
Réglez le rayon de chaque coin séparément, avec éventuellement des rayons horizontaux et verticaux différents pour des coins elliptiques, en px ou en %. L'outil prévisualise la forme et écrit la notation abrégée border-radius équivalente la plus courte.
Comment utiliser Générateur de border-radius
- Choisissez un préréglage (Arrondi, Pilule, Cercle, Tache, Feuille, Ticket) ou réglez les valeurs vous-même.
- Choisissez l'Unité (px ou %) et activez Coins elliptiques (X/Y séparés) si vous voulez des rayons X/Y distincts.
- Ajustez chaque coin (En haut à gauche, En haut à droite, En bas à droite, En bas à gauche) ; cochez Lier tous les coins pour les modifier ensemble.
- Modifiez largeur, hauteur et couleur dans Réglages de l'aperçu pour voir la forme à votre taille.
- Copiez le code CSS.
Exemple
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Quand utiliser Générateur de border-radius
Utilisez-le pour des cartes arrondies, des pilules, des avatars et des formes organiques de type blob réalisées en pur CSS. Les pourcentages s'adaptent à l'élément (50 % sur un carré donne un cercle). Pour des polygones quelconques ou des formes à coupes droites, utilisez le générateur de clip-path ; pour des formes organiques complexes à nombreux points, utilisez le générateur de blob SVG.
Comment fonctionne Générateur de border-radius
Les coins sont ordonnés haut gauche, haut droite, bas droite, bas gauche, comme l'exige CSS. Chaque groupe de quatre valeurs est raccourci selon les règles standard de la notation abrégée : la quatrième valeur est supprimée si elle est égale à la deuxième, la troisième si elle est égale à la première, et la deuxième si elle est égale à la première. Avec des coins elliptiques, les rayons verticaux suivent une barre oblique (h / v) ; la partie après la barre est omise lorsque chaque rayon vertical est égal à son rayon horizontal.
Cas d'utilisation courants
- Boutons et étiquettes en forme de pilule
- Avatars circulaires
- Images blob organiques avec rayons elliptiques à 8 valeurs
- Cartes en forme de ticket ou de feuille
- Coins asymétriques de bulles de dialogue
Questions Fréquentes
Que signifie la barre oblique dans border-radius ?
Les valeurs avant la barre sont des rayons horizontaux et celles après sont des rayons verticaux, ce qui produit des coins elliptiques.
Pourquoi 999px donne-t-il une forme de pilule ?
Quand les rayons dépassent la boîte, les navigateurs les réduisent tous proportionnellement : une valeur énorme donne donc toujours des extrémités parfaitement rondes.
Faut-il utiliser px ou % ?
px garde la même courbe à n'importe quelle taille ; % est relatif à la largeur (horizontal) et à la hauteur (vertical) de l'élément, ce qu'il faut pour les cercles et les blobs.