Les bords arrondis en CSS avec border-radius

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 au 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;
}

La valeur saisie correspond ainsi à la distance sur laquelle s’applique l’effet d’arrondi et s’applique par défaut sur les quatre angles de l’élément.

Comment distinguer les quatre angles de la forme ?

Pour faire varier les quatre angles, vous pouvez utilisez les quatre propriétés correspondant aux quatre angles.

Une solution plus simple consiste à utiliser la version raccourcie border-radius en précisant 2 ou 4 valeurs.

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;
}

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;
}

Distinctions des rayons verticaux et horizontaux

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

Afin de distinguer les rayons horizontaux, des rayons verticaux, il suffit de saisir les deux valeurs en les séparant par une barre oblique /. La ou les valeurs saisies avant la barre oblique s’appliquent aux rayons horizontaux et la ou les valeurs saisies après s’appliquent aux 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;
}

En suivant les mêmes règles que nous avons vu précédemment, il est ainsi possible de saisir jusqu’à huit valeurs d’angles, quatre pour les angles horizontaux et quatre pour les angles 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%;
}

Une punaise

.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% 
}

Un citron

.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%;
}

Générateur d’arrondis

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.