Les bords arrondis en CSS avec border-radius

Cet article propose de faire le tour de la propriété CSS border-radius afin de bien comprendre l’étendue des possibilités qui s’offrent aux web designers en jouant avec les paramètres.

La propriété border-radius

La propriété CSS border-radius permet d’arrondir les angles d’un élément HTML. Les trois carrés aux coins arrondis ci-dessous se distinguent donc par la valeur définie sur border-radius : 10px, 20px et 30px.

.bloc-1 {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 10px;
}
.bloc-2 {
  width: 100px;
  height: 100px;
  background-color: #029ab9;
  border-radius: 20px;
}
.bloc-3 {
  width: 100px;
  height: 100px;
  background-color: #027086;
  border-radius: 30px;
}

.bloc-1 {  width: 100px;  height: 100px;  background-color: #03C4EB;  border-radius: 10px;}.bloc-2 {  width: 100px;  height: 100px;  background-color: #029ab9;  border-radius: 20px;}.bloc-3 {  width: 100px;  height: 100px;  background-color: #027086;  border-radius: 30px;}

Lorsqu’une seule valeur est indiquée, elle définit le rayon d’arrondi des quatre coins de l’élément.

Comment distinguer les quatre angles de la forme ?

Pour régler séparément l’arrondi de chaque coin, vous pouvez utiliser les quatre propriétés correspondantes.

Une solution plus simple consiste à utiliser la version raccourcie border-radius en précisant 2, 3 ou 4 valeurs. Nous présenterons ici deux ou quatre valeurs pour régler les arrondis des différents coins.

Saisir deux valeurs permet de distinguer les coins haut gauche/bas droite des coins haut droit/bas gauche.

.bloc {
  width: 100px;
  height: 100px;
  background-color: #029ab9;
  border-radius: 30px 0;
}

.bloc {  width: 100px;  height: 100px;  background-color: #029ab9;  border-radius: 30px 0;}

Saisir quatre valeurs permet de distinguer les quatre angles en tournant autour de la forme dans le sens des aiguilles d’une montre en commençant par le coin supérieur gauche.

.bloc {
  width: 100px;
  height: 100px;
  background-color: #027086;
  border-radius: 10px 20px 30px 40px;
}

.bloc {  width: 100px;  height: 100px;  background-color: #027086;  border-radius: 10px 20px 30px 40px;}

Distinction des rayons verticaux et horizontaux

La propriété border-radius permet de distinguer les rayons horizontaux et verticaux.

Pour définir séparément les rayons horizontaux et verticaux, séparez les deux groupes de valeurs par une barre oblique /. Les valeurs placées avant la barre définissent les rayons horizontaux ; celles placées après définissent les rayons verticaux.

Dans l’exemple suivant, les rayons horizontaux sont réglés à 40 pixels pour les quatre angles et les rayons verticaux sont réglés à 10 px pour les quatre angles.

.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 40px / 10px;
}

.bloc {  width: 100px;  height: 100px;  background-color: #03C4EB;  border-radius: 40px / 10px;}

En suivant les mêmes règles que nous avons vues précédemment, il est ainsi possible de saisir jusqu’à huit valeurs d’angles, quatre pour les rayons horizontaux et quatre pour les rayons verticaux :

border-radius: rh1 rh2 rh3 rh4 / rv1 rv2 rv3 rv4 ;

Exemples de formes

Un cercle

.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 50px;
  /* Ou au choix */ 
  border-radius: 50%;
}

.bloc {  width: 100px;  height: 100px;  background-color: #03C4EB;  border-radius: 50px;  /* Ou au choix */   border-radius: 50%;}

Une punaise

.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 100% 0% 100% 100%;
}

.bloc {  width: 100px;  height: 100px;  background-color: #03C4EB;  border-radius: 100% 0% 100% 100%;}

Un quart de cercle

.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 0% 0% 0% 100% 
}

.bloc {  width: 100px;  height: 100px;  background-color: #03C4EB;  border-radius: 0% 0% 0% 100% }

Un citron

.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 78% 10% 78% 10%;
}

.bloc {  width: 100px;  height: 100px;  background-color: #03C4EB;  border-radius: 78% 10% 78% 10%;}

Une goutte

.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 0% 100% 40% 60% / 0% 60% 40% 100%;
}

.bloc {  width: 100px;  height: 100px;  background-color: #03C4EB;  border-radius: 0% 100% 40% 60% / 0% 60% 40% 100%;}

Générateur d’arrondis

Border-radius

Quatres angles simultanés

Quatres angles indépendants

Angles horizontaux & verticaux

Options de la forme

border-radius: 0;

Sauf mention contraire*, l’article Les bords arrondis en CSS avec border-radius et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.