Générateur de Border Radius
Faites glisser les poignées de coin pour sculpter des blobs organiques avec 8 rayons indépendants, puis copiez le code CSS ou Tailwind.
Comment utiliser le générateur de Border Radius
- Faites glisser l'une des 4 poignées de coin directement sur la boîte d'aperçu pour la façonner visuellement.
- Affinez avec les curseurs : chaque coin possède un rayon horizontal et vertical indépendants.
- Essayez les préréglages : blobs, feuille, œuf et formes de ticket en un clic.
- Faites correspondre les couleurs de la boîte et de l'arrière-plan à votre design réel pour un aperçu précis.
- Copiez la déclaration border-radius depuis l'onglet CSS, ou récupérez la classe Tailwind.
À propos de ce générateur de Border Radius
La plupart des gens connaissent border-radius comme une valeur unique — mais la propriété accepte en réalité jusqu'à 8 valeurs : quatre rayons horizontaux et quatre rayons verticaux, séparés par une barre oblique (p. ex. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). Cette syntaxe à barre oblique est le secret des formes organiques « blob » omniprésentes dans le web design moderne.
Ce générateur expose les 8 valeurs sous forme de curseurs et de poignées de coin déplaçables, pour sculpter exactement la forme voulue sans mémoriser la syntaxe. Lorsque tous les coins partagent des rayons horizontaux et verticaux égaux, la sortie se simplifie automatiquement en notation standard à 1–4 valeurs. Le code généré fonctionne dans tous les navigateurs modernes, et l'onglet Tailwind produit une classe rounded-[...] à valeur arbitraire.
FAQ Border Radius
Qu'est-ce que la syntaxe avec barre oblique (/) dans border-radius ?
Dans border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%, les valeurs avant la barre sont les rayons horizontaux des quatre coins (supérieur gauche, supérieur droit, inférieur droit, inférieur gauche) et celles d'après leurs rayons verticaux. Des rayons horizontaux et verticaux différents créent des coins elliptiques — la base des formes blob organiques.
Comment faire un cercle parfait ?
Réglez tous les coins à 50 % (ou cliquez sur le préréglage Cercle). Sur un élément carré, border-radius: 50% produit un cercle parfait ; sur un rectangle, une ellipse. Les pourcentages sont relatifs à la largeur et à la hauteur propres de l'élément.
Faut-il utiliser des pourcentages ou des pixels pour border-radius ?
Les pourcentages s'adaptent à l'élément, créant des formes responsives idéales pour les blobs. Les pixels donnent une taille de coin fixe, préférable pour les composants UI comme les boutons et les cartes où l'on veut un arrondi constant quelle que soit la taille. Ce générateur utilise des pourcentages pour que vos formes gardent leurs proportions à toute taille.
Pourquoi mon blob semble-t-il écrasé sur un élément large ?
Les rayons en pourcentage sont relatifs aux dimensions de l'élément : 50 % horizontal sur une boîte de 400 px de large font 200 px, tandis que 50 % vertical sur 200 px de haut font 100 px. C'est le comportement attendu : la forme s'adapte à la boîte. Prévisualisez avec le même rapport d'aspect que votre élément réel pour plus de précision.
La syntaxe à 8 valeurs fonctionne-t-elle dans tous les navigateurs ?
Oui. La syntaxe à barre oblique pour les coins elliptiques fait partie de la spécification CSS Backgrounds and Borders et est prise en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari), sans préfixe.