Generateur de Border Radius
Generez des valeurs CSS border-radius visuellement. Controlez chaque coin independamment et copiez le code CSS.
Fonctionnalites principales
- Contrôle individuel du rayon des coins
- Lier/délier les coins pour des valeurs uniformes
- Formes prédéfinies (pilule, cercle, feuille, ticket)
- Copie du code CSS en un clic
Guide
La propriété CSS border-radius contrôle l'arrondi des coins d'un élément. Au plus simple, border-radius: 8px arrondit les quatre coins de 8 pixels. Au plus complexe, border-radius accepte huit valeurs (quatre rayons horizontaux et quatre rayons verticaux séparés par une barre oblique) pour créer des coins asymétriques et elliptiques qui produisent des formes organiques non circulaires. Ce guide couvre tous les aspects de border-radius : syntaxe, effets visuels, motifs courants, considérations de performance et applications de design. La syntaxe de base prend de une à quatre valeurs représentant le rayon du cercle de chaque coin. Une valeur s'applique aux quatre coins : border-radius: 10px. Deux valeurs définissent haut-gauche/bas-droit et haut-droit/bas-gauche : border-radius: 10px 20px. Trois valeurs définissent haut-gauche, haut-droit/bas-gauche et bas-droit : border-radius: 10px 20px 30px. Quatre valeurs définissent chaque coin individuellement dans le sens horaire en partant du haut-gauche : border-radius: 10px 20px 30px 40px. Vous pouvez aussi cibler des coins individuels avec des propriétés détaillées : border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius. Les valeurs en pourcentage créent des effets qui se mettent à l'échelle avec l'élément. border-radius: 50% sur un élément carré produit un cercle parfait. Sur un élément rectangulaire, 50% produit une ellipse. C'est parce que les valeurs en pourcentage sont relatives aux dimensions de l'élément : les rayons horizontaux sont des pourcentages de la largeur, les rayons verticaux sont des pourcentages de la hauteur. Un élément de 200px par 100px avec border-radius: 50% a des coins avec un rayon horizontal de 100px et un rayon vertical de 50px, créant une ellipse plutôt qu'un cercle. Cette relation dimensionnelle est importante à comprendre lorsque vous travaillez avec des mises en page réactives où les proportions des éléments changent à différentes largeurs de fenêtre. La syntaxe avec barre oblique permet des coins elliptiques où les rayons horizontaux et verticaux diffèrent. border-radius: 50px / 25px crée des coins qui courbent davantage horizontalement que verticalement, produisant un effet ovale étiré. La syntaxe complète à huit valeurs est : border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v, où h est le rayon horizontal et v le rayon vertical. Ce niveau de contrôle vous permet de créer des formes organiques en blob qui seraient difficiles à obtenir autrement. Une valeur comme border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produit une forme asymétrique d'aspect naturel souvent utilisée dans le design web moderne pour les blobs décoratifs, les arrière-plans d'avatars et les séparateurs de sections. Comprendre la géométrie derrière border-radius aide à prédire les résultats visuels. Chaque coin de l'élément reçoit une ellipse (ou un cercle si les deux rayons sont égaux) ajustée à l'intérieur. La bordure, l'arrière-plan et le contenu sont tous rognés à ce rectangle arrondi. L'ellipse pour chaque coin est définie par son rayon horizontal (s'étendant le long du bord supérieur ou inférieur) et son rayon vertical (s'étendant le long du bord gauche ou droit). Lorsque les deux rayons sont égaux, le coin est un arc circulaire. Lorsqu'ils diffèrent, le coin est un arc elliptique. Visualiser cette ellipse vous aide à comprendre pourquoi certaines combinaisons de valeurs produisent des formes inattendues. Créer un cercle parfait exige deux conditions : l'élément doit être carré (largeur et hauteur égales), et border-radius doit être 50% ou une valeur égale à la moitié de la taille de l'élément. Si l'élément n'est pas carré, border-radius: 50% crée une ellipse. Pour les photos de profil et les avatars, assurez-vous que le conteneur est carré en utilisant des valeurs de largeur et de hauteur égales, ou utilisez aspect-ratio: 1 en CSS, puis appliquez border-radius: 50%. Overflow: hidden sur le conteneur rogne l'image à la forme circulaire. Une alternative est d'utiliser clip-path: circle(50%) qui produit le même résultat visuel. Les formes en pilule (formes de stade) sont des rectangles avec des petits côtés entièrement arrondis. Appliquez border-radius avec une valeur égale ou supérieure à la moitié de la hauteur de l'élément. Pour un bouton de 40px de haut, border-radius: 20px arrondit les extrémités en demi-cercles. Utiliser une très grande valeur comme border-radius: 9999px garantit une forme en pilule quelle que soit la hauteur de l'élément, parce que le navigateur plafonne le rayon à la moitié de la plus petite dimension. Cette technique est courante pour les étiquettes, badges, boutons et champs de saisie dans le design d'interface moderne. La forme en pilule est devenue le style de bouton par défaut dans de nombreux systèmes de design, y compris les Human Interface Guidelines d'Apple. Border-radius interagit avec plusieurs autres propriétés CSS de façons qui affectent le rendu. La bordure elle-même est affectée : la ligne de bordure suit le coin arrondi, conservant son épaisseur tout au long de la courbe. Outline ne suit pas border-radius dans la plupart des navigateurs, s'affichant comme un rectangle même lorsque l'élément a des coins arrondis (bien que Firefox et les versions plus récentes de Chromium prennent désormais en charge les contours arrondis). Box-shadow suit le border-radius, projetant des ombres arrondies qui correspondent à la forme de l'élément. Overflow: hidden rogne le contenu enfant à la forme arrondie, ce qui est essentiel pour les images à l'intérieur de conteneurs arrondis. Background-clip détermine si l'arrière-plan s'étend sous la bordure dans la zone arrondie. L'algorithme de rendu de border-radius résout les conflits lorsque la somme des rayons adjacents dépasse l'espace disponible. Si vous définissez border-top-left-radius: 100px et border-top-right-radius: 100px sur un élément qui ne fait que 150px de large, les deux rayons totalisent 200px mais seulement 150px sont disponibles. Le navigateur réduit proportionnellement les deux rayons pour qu'ils s'ajustent. Plus précisément, il calcule un facteur d'échelle (150/200 = 0,75) et l'applique aux deux rayons, ce qui donne 75px chacun. Cet ajustement automatique signifie que vous pouvez utiliser de grandes valeurs de rayon sans vous soucier du débordement, bien que le résultat visuel puisse différer de votre intention. L'algorithme considère les quatre coins simultanément, trouvant le plus petit facteur d'échelle nécessaire. Le border-radius imbriqué exige que les éléments internes aient des rayons plus petits que leurs parents pour maintenir un espacement visuel constant. Si une carte a border-radius: 16px et padding: 8px, la zone de contenu interne devrait avoir border-radius: 8px (rayon du parent moins le padding). La formule est : rayon interne = rayon externe - l'écart entre les éléments. Si l'écart est plus grand que le rayon externe, le rayon interne devrait être 0 (pas d'arrondi). Ce principe s'applique aux cartes contenant des images, aux conteneurs imbriqués et à toute relation parent-enfant où les deux ont des coins arrondis. Ignorer cette règle crée des largeurs d'écart incohérentes aux coins qui paraissent visuellement fausses même si vous ne pouvez pas immédiatement identifier pourquoi. Les formes CSS et border-radius servent des objectifs différents qui sont parfois confondus. Border-radius arrondit les coins visuels et la zone de clic d'un élément. clip-path CSS crée des formes arbitraires par rognage (circle(), ellipse(), polygon(), path()). Pour les rectangles arrondis simples, border-radius est plus performant et plus facile à maintenir. Pour les formes complexes (triangles, hexagones, polygones personnalisés), clip-path est nécessaire. Border-radius est composite sur le GPU et est l'un des effets visuels les moins coûteux en CSS. clip-path avec des polygones complexes peut être plus coûteux. La propriété shape-outside utilise border-radius pour l'habillage du texte autour d'éléments arrondis, créant des mises en page de style magazine. La performance de border-radius est généralement excellente. Les coins arrondis sont rendus par le compositeur GPU dans tous les navigateurs modernes et ne déclenchent pas de recalcul de mise en page ni de repeinte pendant les animations. Animer border-radius lui-même est également performant parce que le navigateur peut interpoler les valeurs et composer le résultat sur le GPU. Cela rend border-radius adapté aux effets de survol (transition de coins carrés à arrondis) et aux éléments animés. La seule considération de performance est lorsque border-radius est combiné avec box-shadow sur de nombreux éléments, parce que chaque ombre arrondie exige un travail de composition supplémentaire. La prise en charge de border-radius par les navigateurs est universelle dans tous les navigateurs modernes sans préfixes. Les préfixes -webkit-border-radius et -moz-border-radius ne sont plus nécessaires depuis environ 2012. Les seuls cas limites concernent la syntaxe avec barre oblique pour les coins elliptiques, qui est prise en charge partout depuis IE9. Si vous prenez en charge des navigateurs très anciens (IE8), border-radius se dégrade gracieusement : l'élément s'affiche simplement avec des coins carrés. Aucune fonctionnalité n'est perdue, seulement l'arrondi visuel. Les tendances de design impliquant border-radius oscillent entre les extrêmes. Le début des années 2010 favorisait un arrondi subtil de 3px à 5px. Le milieu des années 2010 est revenu aux coins nets à 0px dans le flat design. La fin des années 2010 a ramené l'arrondi doux avec des rayons de 8px à 16px dans le material design et les interfaces influencées par iOS. Le début des années 2020 a introduit des designs super-arrondis avec des rayons de 20px+ et des formes blob asymétriques. Les tendances actuelles favorisent un arrondi moyen (8px à 16px) pour les composants d'interface et un arrondi plus important (24px+) pour les cartes et conteneurs, créant une sensation douce et accueillante. La forme squircle (superellipse), qu'Apple utilise pour ses icônes d'application, a gagné en popularité mais exige clip-path ou SVG parce que border-radius crée un arc circulaire standard, pas une superellipse. Des valeurs border-radius cohérentes à travers un système de design créent une cohésion visuelle. Définissez une échelle de jetons de rayon : --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Appliquez ces jetons de manière cohérente : les boutons utilisent --radius-md, les cartes utilisent --radius-lg, les avatars utilisent --radius-full, les petits badges utilisent --radius-sm. Cette approche systématique empêche l'incohérence visuelle des valeurs de rayon aléatoires (6px ici, 10px là, 14px ailleurs) qui donne aux designs une sensation inachevée. De nombreux frameworks CSS (Tailwind, Chakra UI) incluent des échelles de rayon prédéfinies pour cette raison. Un border-radius réactif peut être obtenu en utilisant clamp(), min(), ou des media queries. Une carte avec border-radius: clamp(8px, 2vw, 24px) a un arrondi plus petit sur les petits écrans et plus grand sur les écrans larges. Cela empêche les grands rayons de dominer les petits éléments sur mobile. Alternativement, réduisez border-radius aux points de rupture mobile : border-radius: 24px sur desktop, 12px sur tablette, 8px sur mobile. Pour les cartes mobiles en pleine largeur qui touchent les bords de l'écran, supprimer entièrement border-radius sur les petits écrans (border-radius: 0 au point de rupture mobile) est un motif courant qui maximise la zone de contenu. Border-radius avec des images exige overflow: hidden sur le conteneur pour rogner l'image à la forme arrondie. Sans overflow: hidden, l'image s'étend au-delà des coins arrondis et l'arrondi n'apparaît que sur l'arrière-plan du conteneur. Une approche alternative utilise l'image elle-même comme background-image sur un élément arrondi. Pour les éléments <img>, la propriété object-fit contrôle comment l'image remplit le conteneur arrondi : object-fit: cover remplit toute la zone (en rognant si nécessaire), tandis que object-fit: contain ajuste toute l'image à l'intérieur (laissant potentiellement des espaces). Les deux approches fonctionnent, mais overflow: hidden sur un conteneur avec un <img> enfant est plus courant parce qu'il préserve l'élément img pour l'accessibilité (texte alt) et le SEO. La création de formes avancées combine border-radius avec d'autres propriétés CSS pour créer des formes complexes sans images ni SVG. Une forme d'œuf utilise des rayons verticaux asymétriques : border-radius: 50% / 60% 60% 40% 40%. Une forme de feuille utilise l'arrondi de coins opposés : border-radius: 0 50% 0 50%. Une forme de goutte combine border-radius sur trois coins avec un quatrième coin vif. Une bulle de dialogue utilise border-radius sur la forme principale avec un pseudo-élément (::before ou ::after) pour la queue. Ces formes en CSS uniquement évitent le besoin de SVG ou d'images pour de simples éléments décoratifs, réduisant les requêtes HTTP et permettant un thème de couleur facile via des propriétés personnalisées CSS. Border-radius et le contenu textuel interagissent de façons spécifiques. Le texte à l'intérieur d'un élément arrondi ne suit pas la courbe. Le texte est disposé dans la zone de contenu rectangulaire, et les coins arrondis ne rognent que l'arrière-plan et la bordure. Pour les petites valeurs de rayon, cela n'est pas perceptible. Pour les grandes valeurs de rayon, le texte près des coins peut sembler avoir un padding supplémentaire parce que l'arrière-plan arrondi s'éloigne du bord du contenu. C'est l'une des raisons pour lesquelles les éléments avec de grandes valeurs border-radius ont souvent besoin de plus de padding que leurs homologues carrés. Si vous définissez border-radius: 24px sur un bouton, le padding devrait être d'au moins 12px à 16px sur les côtés pour que le texte ne paraisse pas visuellement encombrer le bord courbé. L'animation de border-radius entre les états crée des transitions de forme douces. La transition de border-radius: 0 à border-radius: 50% sur un élément carré le transforme d'un carré en cercle. Cet effet est populaire pour les indicateurs de chargement, les effets de survol et les animations de révélation. CSS transition: border-radius 0.4s ease gère l'interpolation. Pour un morphing plus complexe (transition entre différentes formes asymétriques utilisant la syntaxe avec barre oblique), les transitions CSS interpolent chacune des huit valeurs indépendamment, produisant des formes intermédiaires douces. Les feuilles de style d'impression et border-radius méritent considération pour les applications web que les utilisateurs peuvent imprimer. La plupart des navigateurs modernes rendent border-radius à l'impression, mais certaines versions plus anciennes non. Si votre design dépend de coins arrondis pour le sens (pas seulement la décoration), testez la sortie d'impression. Pour les factures, reçus et autres documents imprimables, les coins arrondis sont décoratifs et leur absence à l'impression n'affecte pas l'utilisabilité. Border-radius dans les frameworks CSS et les bibliothèques de composants s'est standardisé autour d'une approche basée sur des jetons. Tailwind CSS utilise des classes comme rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl et rounded-full. Bootstrap utilise rounded, rounded-circle, rounded-pill et rounded-0 à rounded-5. Chakra UI utilise borderRadius avec des tailles nommées (sm, md, lg, xl, full). Comprendre comment ces frameworks implémentent border-radius vous aide à migrer entre les systèmes et à personnaliser les valeurs par défaut pour correspondre à vos exigences de design. Les squircles (superellipses) sont une forme qui ressemble à un rectangle arrondi mais avec une courbe mathématique différente. Apple utilise des squircles pour les icônes d'application iOS. Un squircle a une courbure plus graduelle à la transition du bord droit à la courbe, produisant un aspect plus doux qu'un arc de cercle border-radius standard. CSS border-radius ne peut pas produire un vrai squircle parce qu'il utilise des arcs circulaires ou elliptiques. Pour créer un squircle en CSS, vous avez besoin de clip-path avec une fonction path() ou d'un masque SVG. La différence visuelle entre un rectangle arrondi border-radius et un squircle est subtile à petite taille mais notable à plus grande taille, en particulier aux rayons de coin supérieurs à 20px. Les container queries et border-radius peuvent fonctionner ensemble pour un design de composant véritablement réactif. Avec les container queries CSS (@container), vous pouvez changer border-radius en fonction de la taille du conteneur plutôt que de la taille de la fenêtre. Un composant carte avec border-radius: 24px dans un conteneur large peut passer à border-radius: 12px lorsqu'il est placé dans une barre latérale étroite, quelle que soit la largeur globale de la page. Cette réactivité au niveau du composant produit des résultats visuels plus cohérents que les media queries basées sur la fenêtre seule. Border-radius dans les éléments de tableau exige un traitement spécial. Par défaut, border-radius sur un élément <table> n'arrondit pas les coins des cellules individuelles. Pour créer un tableau avec des coins externes arrondis, définissez border-collapse: separate (pas collapse) sur le tableau, appliquez border-radius à l'élément table et masquez le débordement avec overflow: hidden. Pour des cellules arrondies individuelles, appliquez border-radius à des éléments <td> ou <th> spécifiques. Le border-top-left-radius va sur la première cellule de la première ligne, border-top-right-radius sur la dernière cellule de la première ligne, et ainsi de suite. Cette approche par cellule est verbeuse mais donne un contrôle précis. Les fonctions de timing de transition affectent la façon dont les animations border-radius sont ressenties. Une transition linéaire produit un arrondi mécanique et robotique. Une transition ease commence vite, ralentit au milieu et accélère à la fin, produisant une sensation naturelle. Une transition ease-in-out crée une accélération et décélération douces. Pour les interfaces ludiques, les fonctions cubic-bezier peuvent créer des changements de rayon rebondissants ou élastiques : transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) dépasse la valeur cible avant de se stabiliser. Adaptez la fonction de timing au style d'animation global de votre interface. CSS Houdini et la Paint API ouvrent des possibilités futures pour border-radius au-delà de ce que la spécification actuelle offre. Avec Houdini, vous pouvez créer des worklets de peinture personnalisés qui dessinent n'importe quelle forme de coin : squircles, bords festonnés, bordures ondulées et d'autres formes que border-radius standard ne peut pas produire. Bien que la prise en charge de Houdini soit encore limitée (principalement les navigateurs Chromium), cela représente l'avenir des formes CSS personnalisées. En attendant, les clip-path SVG et les masques fournissent des alternatives inter-navigateurs pour les formes de coin non standard. Tester border-radius à travers les résolutions d'écran et les densités de pixels compte parce que le rendu des bords courbés diffère entre les écrans standard (1x), Retina (2x) et les affichages plus denses. Sur un écran 1x, une bordure de 1px sur un coin arrondi peut paraître crénelée. Sur un écran 2x, le même coin se rend en douceur parce qu'il y a plus de pixels physiques disponibles pour représenter la courbe. Si votre public cible inclut des utilisateurs sur des écrans basse densité, vérifiez que vos coins arrondis paraissent acceptables à la résolution 1x. Les valeurs de rayon plus grandes se rendent plus en douceur à toutes les densités parce que la courbe est plus graduelle. L'outil générateur de border-radius vous permet d'ajuster visuellement le rayon horizontal et vertical de chaque coin indépendamment, de prévisualiser le résultat en temps réel et de copier le CSS. C'est plus rapide que de deviner les valeurs dans le code, en particulier pour la syntaxe avec barre oblique où la relation entre les huit valeurs et le rendu visuel n'est pas intuitive. Utilisez le générateur pour explorer les formes asymétriques, trouver les valeurs exactes qui correspondent à votre intention de design, puis appliquez ces valeurs dans votre feuille de style.
Questions frequentes
Puis-je définir des valeurs différentes pour chaque coin ?
Oui, vous pouvez contrôler indépendamment les quatre coins : haut-gauche, haut-droit, bas-droit et bas-gauche.
Quelles unités sont utilisées ?
L'outil utilise les pixels (px) par défaut, que vous pouvez modifier dans la sortie CSS selon vos besoins.
