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’étendu 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 au coins arrondis ci-dessous se distinguent donc par la valeur définie sur border-radius : 10px, 20px et 30px.

Exemple de 3 carrés avec des bords arrondis
.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.

les quatre propriétés par angle

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.

Border-radius avec deux valeurs
.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.

Border-radius avec quatre valeurs
.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

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

Une punaise

Exemple de forme punaise en CSS
.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 100% 0% 100% 100%;
}

Un quart de cercle

Exemple de forme quart de cercle en CSS
.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 0% 0% 0% 100% 
}

Un citron

Exemple de forme de citron en CSS
.bloc {
  width: 100px;
  height: 100px;
  background-color: #03C4EB;
  border-radius: 78% 10% 78% 10%;
}

Une goutte

Exemple de forme goutte en CSS
.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

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.