Border-radius - Astuces CSS | CSS Almanach 2025

Vous pouvez donner à n'importe quel élément des «coins arrondis» en appliquant un border-radiusvia CSS. Vous ne remarquerez que s'il y a un changement de couleur impliqué. Par exemple, si l'élément a une couleur d'arrière-plan ou une bordure différente de l'élément sur lequel il se trouve. Exemples simples:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Ce n'est vraiment plus nécessaire, mais pour obtenir le meilleur support de navigateur possible, vous pouvez préfixer -webkit-et -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Notez l'ordre de ces propriétés: les préfixes du fournisseur sont répertoriés en premier et la version «spec» sans préfixe est répertoriée en dernier. C'est la bonne façon de procéder. Le rayon de la frontière est un excellent exemple de la raison pour laquelle nous procédons de cette façon. Dans une version légèrement plus compliquée de l'utilisation border-radius(où vous passez deux valeurs au lieu d'une), l'ancien -webkit-préfixe du fournisseur ferait quelque chose de complètement différent de la version «spec». Donc, si nous copions / collons aveuglément les mêmes valeurs dans les trois propriétés, nous pourrions voir des résultats différents entre les navigateurs. En savoir plus sur ce scénario. Pour la plus grande cohérence à long terme, il est préférable de lister la dernière version "spec".

Il est assez réaliste de nos jours de supprimer des préfixes et d'utiliser simplement border-radius, comme indiqué ici.

Si l'élément a un arrière-plan d'image, il sera naturellement découpé au coin arrondi:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Parfois, vous pouvez voir une background-color«fuite» à l'extérieur d'une frontière lorsqu'elle border-radiusest présente. (voir). Pour éviter cela, utilisez background-clip:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Avec une seule valeur, border-radiussera la même aux quatre coins d'un élément. Mais ce n’est pas forcément le cas. Vous pouvez spécifier chaque coin séparément si vous le souhaitez:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Vous pouvez également spécifier deux ou trois valeurs. MDN l'explique bien:

Si une valeur est définie, ce rayon s'applique aux 4 coins .
Si deux valeurs sont définies, la première s'applique à top-leftet bottom-rightcorner, la seconde s'applique à top-rightet bottom-leftcorner.
Quatre valeurs s'appliquent au top-left, top-right, bottom-right, bottom-leftcoin dans cet ordre.
Trois valeurs: la deuxième valeur s'applique à top-rightet également bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Vous pouvez également spécifier les rayons dans lesquels le coin est arrondi. En d'autres termes, l'arrondi ne doit pas nécessairement être parfaitement circulaire, il peut être elliptique. Cela se fait en utilisant une barre oblique («/») entre deux valeurs.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Remarque: Firefox ne prend en charge que les bordures elliptiques dans les navigateurs WebKit 3.5+ et plus anciens (par exemple Safari 4) traitent à tort «40px 10px» comme étant «40px / 10px».

Vous pouvez spécifier la valeur de border-radiusen pourcentages. Ceci est particulièrement utile lorsque vous souhaitez créer un cercle ou une forme d'élipse, mais peut être utilisé chaque fois que vous souhaitez que le rayon de la bordure soit directement corrélé à la largeur des éléments.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Remarque: dans Safari, les valeurs de pourcentage pour le rayon de la bordure sont uniquement prises en charge dans la version 5.1+. Dans Opera, uniquement pris en charge dans la version 11.5+.

Voici chaque propriété individuelle, avec des préfixes de fournisseur:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Remarque: Chacune de ces valeurs peut également avoir une valeur séparée par un espace, comme «5px 10px», qui se comporte comme une valeur séparée par une barre oblique en raccourci (rayon horizontal (espace) rayon vertical).

Ressources

Outil rapide pour générer un code de rayon de bordure
Documents Mozilla
À la recherche du rayon parfait
Avons-nous besoin de préfixer border-radius?

Voici un petit truc pour jouer avec les différentes propriétés et valeurs:

Voir le Pen All the border-radius 'de Chris Coyier (@chriscoyier) sur CodePen.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.