Créer des bordures arrondies avec border-radius en CSS

Télécharger le PDF du cours


Livret PDF du cours
Le module CSS3 relatif aux bordures a apporté de nouvelles fonctionnalités nous permettant de personnaliser encore davantage nos bordures. Parmi celles-ci, l’une des nouveautés les plus attendues était la possibilité de créer des bordures arrondies.

Nous allons donc pouvoir créer des bordures arrondies en CSS (ou plus exactement arrondir les bords d’un élément HTML) en utilisant la propriété border-radius.

Notez que l’arrondi créé va s’appliquer aux bords de l’élément en soi (ou à son arrière-plan si vous préférez). Cela signifie que nous n’avons pas forcément besoin de définir une quelconque bordure avec border pour que border-radius s’applique.

 

Comment sont définis les arrondis avec border-radius ?

La propriété border-radius va prendre deux valeurs représentant la dimension du « rayon » sur l’axe des X (axe horizontal) et la dimension du « rayon » sur l’axe des Y (axe vertical) d’une ellipse qui va servir à définir la forme de l’arrondi.

Ces deux valeurs dont être séparées par un slash comme ceci : border-radius: X/Y. La deuxième valeur est facultative et si elle est omise elle sera considérée comme égale à la première par défaut.

Note : ici, j’appelle « rayon » sur l’axe de X et des Y les longueurs égales à la moitié de la largeur et à la moitié de la hauteur totale de l’ellipse, c’est à dire la distance du point central de l’ellipse à son bord gauche ou droit dans le plan horizontal et la distance du point central de l’ellipse à son bord supérieur ou inférieur dans le plan vertical. Bien évidemment, parler de rayon pour une ellipse n’a aucun sens d’un point de vue mathématique, ce n’est que pour vous donner une image.

Ces deux valeurs vont pouvoir être des valeurs de type longueur (en px par exemple) ou des pourcentages (%).

Pour être tout à fait précis, notez déjà que ce sont 4 ellipses qui vont être utilisées pour définir les bordures arrondies d’un élément (une ellipse pour chaque coin).

Pour le moment, nous n’allons mentionner qu’une valeur de rayon horizontale et une valeur de rayon vertical avec border-radius ce qui fait que les 4 ellipses vont être de tailles identiques (c’est la raison pour laquelle je parlerai de « l’ellipse » plutôt que « des ellipses »). Nous verrons par la suite comment définir des bordures arrondies différentes pour chaque côté d’un élément.

Prenons directement un premier exemple pour illustrer tout ça :

Support HTML premier exemple d'utilisation de border-radius

On utilise border-radius en CSS pour créer des bordures arrondies

Exemple de création de bordures arrondies avec border-radius

See the Pen Cours HTML CSS 5.7.1 by Pierre (@pierregiraud) on CodePen.

Ici, nous voulons appliquer des bordures arrondies à nos différents paragraphes. On commence par placer chaque paragraphe dans un div et par donner une couleur de fond à nos éléments div et p pour bien voir la bordure arrondie par la suite.

On attribue également une largeur et une hauteur pour nos différents paragraphes égales à celles de leur parent div pour pouvoir ensuite utiliser la propriété box-sizing et régler d’ores-et-déjà les potentiels problèmes de dépassement des bordures définies avec border.

Ensuite, on définit 3 arrondis différents avec border-radius. Le premier arrondi est défini avec border-radius : 100px / 20px. Cela signifie que chacun des bords arrondis de notre paragraphe va être formé à partir d’une ellipse de largeur maximale de 200px (le « rayon » sur l’axe horizontal * 2) et de hauteur maximale de 40px (le « rayon » sur l’axe vertical * 2). Cela devient très net si on trace ces ellipses à l’intérieur de notre paragraphe :

La propriété CSS border-radius crée des bordures arrondies à partir d'ellipses

Pour notre deuxième arrondi, on ne précise qu’une valeur pour notre propriété border-radius en pixels avec border-radius : 50px. Par défaut, la deuxième valeur va donc être également fixée à 50px. Dans ce cas, les bords de notre paragraphe vont être arrondis selon la forme d’une ellipse de rayon horizontal et vertical de 50px, ce qui n’est rien d’autre qu’un cercle.

En effet, lorsque les deux valeurs passées à border-radius sont les mêmes, alors nous sommes dans le cas particulier où notre ellipse est un cercle (à l’exception des valeurs en % dont nous allons parler par la suite). Ici, vous devez donc vous imaginer le contour d’un cercle de diamètre = 100px.

La propriété CSS border-radius crée des bordures arrondies à partir d'ellipses

Nous utilisons deux fois cet arrondi : une fois dans un paragraphe sans bordures et une fois avec un paragraphe qui possède des bordures. Ici, on précise border-radius : 25% ce qui est équivalent à border-radius : 25%/ 25%. L’arrondi va ainsi être créé à partir d’une ellipse de rayon horizontal égal à 25% de la largeur du paragraphe et de rayon vertical égal à 25% de la hauteur du paragraphe.

Finalement, notre dernier arrondi utilise des valeurs en pourcentage. Ici, vous devez bien comprendre que le pourcentage défini va être un pourcentage de dimension associée (largeur ou hauteur) du paragraphe.

La propriété CSS border-radius crée des bordures arrondies à partir d'ellipses

 

La propriété border-radius et les valeurs en pourcentage (%)

Il faut faire très attention lorsqu’on définit un border-radius avec des valeurs en pourcentage car le ou les pourcentage(s) donné(s) seront exprimés en fonction de la largeur et de la hauteur de la boite représentant l’élément auquel on applique la bordure.

Ainsi, écrire border-radius : 25% signifie que le « rayon » sur l’axe horizontal de l’ellipse utilisée pour créer la bordure sera égal à 25% de la largeur de l’élément et que le « rayon » sur l’axe vertical de l’ellipse utilisée pour créer la bordure sera égal à 25% de la hauteur de l’élément. Ainsi, si notre élément a par exemple une largeur de 400px et une hauteur de 100px, il est équivalent d’écrire border-radius : 25% et border-radius : 100px / 25px.

Ici, vous pouvez retenir la chose suivante : en ne passant qu’une seule valeur à border-radius (que ce soit des px, em, in, viewport related units, cm…), les bordures créées seront toujours issues d’un cercle EXCEPTE dans le cas où l’on utilise une valeur en %.

Bien évidemment, si le boite représentant notre élément est carrée (largeur = hauteur), alors l’arrondi créé sera toujours créé à partir d’un cercle si on ne passe qu’une valeur à border-radius et ceci même si la valeur passée est une valeur en %.

Support HTML démonstration du comportement de border-radius avec des pourcentages

La propriété CSS border radius accepte des valeurs en pourcentage

Résultat du passage de valeurs en pourcentage à border-radius

See the Pen Cours HTML CSS 5.7.2 by Pierre (@pierregiraud) on CodePen.

 

Définir des bordures arrondies différentes

On va tout à fait pouvoir définir un arrondi différent pour chacune des bordures d’un élément. Pour cela, il suffira de passer 2, 3 ou 4 valeurs à la propriété border-radius :

  • En passant une valeur : la valeur va définir les arrondis des 4 bords de l’élément ;
  • En passant deux valeurs : la première valeur va définir l’arrondi des angles supérieur gauche et inférieur droit de l’élément tandis que la seconde valeur va définir l’arrondi des angles supérieur droit et inférieur gauche de l’élément ;
  • En passant trois valeurs : la première valeur définit l’arrondi de l’angle supérieur gauche de l’élément, la deuxième valeur définit l’arrondi des angles supérieur droit et inférieur gauche de l’élément tandis que la troisième valeur définit l’arrondi de l’angle inférieur droit de l’élément ;
  • En passant quatre valeurs : la première valeur définit l’arrondi de l’angle supérieur gauche de l’élément, la deuxième valeur définit l’arrondi de l’angle supérieur droit, la troisième valeur définit l’arrondi de l’angle inférieur droit tandis que la quatrième valeur définit l’arrondi de l’angle inférieur gauche.

Notez par ailleurs que la propriété border-radius est une notation raccourcie des propriétés suivantes :

  • border-top-left-radius : Définit l’arrondi de l’angle supérieur gauche de l’élément ;
  • border-top-right-radius : Définit l’arrondi de l’angle supérieur droit de l’élément ;
  • border-bottom-right-radius : Définit l’arrondi de l’angle inférieur droit de l’élément ;
  • border-bottom-left-radius : Définit l’arrondi de l’angle inférieur gauche de l’élément.

Une nouvelle fois, nous allons pouvoir mentionner deux « rayons » différents pour chacune des bordures arrondies. Dans le cas où on utilise la notation raccourcie border-radius, il va cependant falloir faire bien attention à l’ordre des valeurs lorsqu’on souhaite définir des arrondis différents car celui-ci peut sembler contre intuitif à première vue : nous allons devoir commencer par passer toutes les valeurs de « rayons » horizontaux pour nos arrondis PUIS les valeurs de « rayons » verticaux, en séparant ces deux groupes par un slash.

Notez également qu’en utilisant les propriétés complètes border-top-left-radius, border-top-right-radius, etc. plutôt que la notation raccourcie border-radius il ne faudra PAS indiquer de slash pour séparer les valeurs des deux « rayons » de l’ellipse si on souhaite en préciser deux différentes.

Support HTML création de bordures arrondies différentes par côté

La propriété CSS border-radius nous permet de définir des bordures arrondies différentes par côté

Résultat exemple de bordures arrondies différentes

See the Pen Cours HTML CSS 5.7.3 by Pierre (@pierregiraud) on CodePen.

Pour notre premier arrondi, on définit un border-radius : 50px pour les angles supérieur gauche et inférieur droit de l’élément et un border-radius : 25px pour les angles supérieur droit et inférieur gauche de l’élément.

Notre deuxième arrondi est l’équivalent du premier mais écrit en précisant les valeurs des deux rayons pour chacun de nos angles (ici, les valeurs des deux rayons sont identiques pour chaque angle).

Notre troisième arrondi correspond à une troisième façon d’arriver au même résultat que notre premier arrondi, en utilisant cette fois-ci les propriétés complètes border-top-left-radius, border-top-right-radius, etc. plutôt que la notation raccourcie.

Pour notre quatrième arrondi, les angles supérieur gauche et inférieur droit de l’élément seront formés à partir d’une ellipse de rayon 100px (horizontal) et 50px (vertical). Les angles supérieur droit et inférieur gauche de l’élément emprunteront eux leurs arrondis à une ellipse de rayon horizontal de 30px et de rayon vertical de 70px.

Notre cinquième déclaration d’arrondi est un peu plus complexe à appréhender. Ici, il faut bien comprendre qu’on définit 3 rayons horizontaux pour nos bordures arrondis de 40px, 100px et 10px. La première valeur sera utilisée pour définir l’arrondi horizontal de l’angle supérieur gauche de l’élément, la seconde pour les angles supérieur droit et inférieur gauche et la troisième pour l’angle inférieur droit.

Ensuite, on ne définit que 2 valeurs de rayons verticaux de 50px et 70px. La première valeur sera utilisée pour les angles supérieur gauche et inférieur droit tandis que la deuxième valeur sera utilisée pour les angles supérieur droit et inférieur gauche.

Finalement, le dernier exemple d’arrondi sert à illustrer comment créer des arrondis utilisant deux rayons différents avec nos propriétés complètes border-top-left-radius, border-top-right-radius, etc. Je vous rappelle qu’il ne faut pas préciser de slash en utilisant ces propriétés mais écrire les deux valeurs de rayons à la suite.

 

La gestion des valeurs d’arrondis trop grandes (valeurs aberrantes)

La création de bordures arrondies se fait au moyen d’ellipses ou, dans certains cas particuliers, de cercles. La création de bordures arrondies se fait au moyen d’ellipses ou, dans certains cas particuliers, de cercles. Parfois, cependant, il peut arriver que des valeurs aberrantes soient fournies.

Définition d’une valeur aberrante pour border-radius

Les valeurs passées à la propriété border-radius vont être considérées comme aberrantes et les bordures arrondies vont être redimensionnées dès que la règle « deux bordures adjacentes ne doivent pas se chevaucher » ne sera plus respectée c’est-à-dire dans les situations suivantes :

  • Si l’une (ou chacune) des deux sommes des deux « rayons » dans l’axe vertical des ellipses servant à créer les bordures supérieure gauche et inférieure gauche et supérieure droite et inférieure droite dépasse la valeur de la hauteur de la boite de l’élément ;
  • Si l’une (ou chacune) des deux sommes des deux « rayons » dans l’axe horizontal des ellipses servant à créer les bordures supérieure gauche et supérieure droite et inférieure gauche et inférieure droite dépasse la valeur de la largeur de la boite de l’élément.

Dans ce cas-là, les valeurs passées à border-radius vont être réduites de manière proportionnelle jusqu’à ce que la transition entre les deux bordures arrondies soit fluide (pour être tout à fait exact d’un point de vue mathématique, il faudrait dire « jusqu’à ce qu’on puisse tracer une tangente qui soit parallèle au côté de la boite de l’élément »).

Trouver les valeurs corrigées automatiquement par le CSS à partir des valeurs aberrantes

Imaginons par exemple qu’on ait un paragraphe avec les dimensions suivantes width : 400px; height : 100px et qu’on tente de lui appliquer les bordures arrondies suivantes : border-radius : 100px 250px 200px 300px / 10px 30px 70px 80px.

Cela est équivalent à définir les bordures arrondies suivantes :

  • border-top-left-radius : 100px 10px ;
  • border-top-right-radius : 250px 30px ;
  • border-bottom-right-radius : 200px 70px ;
  • border-bottom-left-radius : 300px 80px.

Faisons maintenant les sommes des rayons 2-à-2 de nos bordures dans les axes horizontal et vertical :

  • Axe horizontal (top-left + top-right) : 100 + 250 = 350px ;
  • Axe horizontal (bottom-right + bottom-left) : 200 + 300 = 500px ;
  • Axe vertical (top-left + bottom-left) : 10 + 80 = 90px ;
  • Axe vertical (top-right + bottom-right) : 30 + 70 = 100px.

Ici, nous allons avoir un problème pour l’axe horizontal avec les bordures inférieures droite et gauche puisque la valeur totale des deux rayon, 500px, est supérieure à la largeur de l’élément qui est 400px.

Ainsi, TOUTES les bordures arrondies de l’élément vont être redimensionnées de façon proportionnelle jusqu’à arriver à la première valeur acceptable pour les valeurs qui posent problème, c’est-à-dire lorsque la somme des rayons (axe horizontal) des deux bordures inférieures droite et gauche fera 400px.

Nous n’avons donc qu’à faire un calcul de proportionnalité en utilisant une règle de 3 pour connaitre les valeurs qui vont être attribuées. Pour cela, il faut déjà trouver le coefficient de proportionnalité qui nous permet de passer de 500 à 400. On a donc : 400 * 100 / 500 = 0,8.

Il ne nous reste donc plus qu’à multiplier toutes les dimensions données à border-radius par 0,8 pour obtenir les valeurs corrigées automatiquement par le CSS soit : border-radius : 80px 200px 160px 240px / 8px 24px 56px 64px

Regardez plutôt le résultat ci-dessous pour vous en convaincre. J’ai également recréé les bordures dans le dernier exemple telles qu’elles seraient si elles n’avaient pas été ajustées :

Support HTML illustration du comportement de border-radius en cas de valeurs aberrantes

Passage de valeurs aberrantes à border-radius en CSS

Résultat de l'exemple de passage de valeurs aberrantes à border-radius

See the Pen Cours HTML CSS 5.7.4 by Pierre (@pierregiraud) on CodePen.


Vous pouvez également noter ici que :

  • Si nous avons plusieurs valeurs aberrantes, alors nous utiliserons le coefficient de proportionnalité de la valeur la plus aberrante afin que tous les arrondis soient de tailles acceptables ;
  • Si une valeur est aberrante en soi (c’est-à-dire si une la valeur d’un rayon de l’ellipse servant à définir bordure arrondie est déjà supérieure à la taille de la boite de l’élément), nous procéderons exactement de la même manière que précédemment pour trouver la valeur qui sera définie automatiquement en CSS ;
  • Ces règles de correction des valeurs s’appliquent pour tous types de valeurs passées, que ce soit des valeurs en px ou en %.

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales