Propriété border-radius

La propriété border-radius crée des coins arrondis pour la bordure et l'arrière-plan. Les valeurs de la propriété sont toutes unités de taille. Valeur par défaut : 0. C'est un raccourci pour les propriétés border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaxe

csssélecteur {
  border-radius: valeur;
}

Nombre de valeurs

La propriété peut prendre 1, 2, 3 ou 4 valeurs, spécifiées avec un espace :

Arrondi elliptique

Deux valeurs séparées par une barre oblique définissent un arrondi elliptique. La valeur avant la barre oblique indique l'arrondi horizontal, et les valeurs après la barre oblique - l'arrondi vertical :

csssélecteur {
  border-radius: horizontal / vertical;
}

Si des arrondis sont définis pour plusieurs coins, alors avant la barre oblique sont listés tous les arrondis horizontaux, et après elle - tous les arrondis verticaux.

Exemple

Définissons un arrondi de 10px pour tous les coins :

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Voyons à quoi ressemblent les arrondis pour une bordure en pointillés :

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons un arrondi de 10px pour les coins d'une diagonale, et un arrondi de 40px - pour les coins de la seconde diagonale :

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons un arrondi de 10px pour le coin supérieur gauche, un arrondi de 30px pour le coin inférieur droit, et un arrondi de 50px - pour les coins de la seconde diagonale :

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Définissons des arrondis différents pour chaque coin :

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Créons un arrondi elliptique, en définissant 20px pour la partie horizontale de l'arrondi, et 40px - pour la partie verticale :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Maintenant, définissons un arrondi elliptique différent pour chaque coin individuellement :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

Exemple

Si on définit pour un bloc carré un arrondi égal à la moitié du côté du carré, on obtient un cercle :

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Exemple

Si on définit un arrondi plus grand que le côté du carré, on obtient quand même un cercle :

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Exemple

On peut aussi obtenir un cercle en définissant border-radius à 50% (l'avantage est que si les dimensions du carré changent, il ne sera pas nécessaire de modifier l'arrondi) :

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

Exemple

Si on définit border-radius en pourcentages pour un rectangle, on obtient un arrondi elliptique. Si la largeur est définie à 400px, la hauteur à 200px, et border-radius à 10%, c'est équivalent à 40px/20px :

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Exemple

Définissons la valeur border-radius à 50% pour un rectangle - on obtient une ellipse :

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Exemple

La propriété border-radius arrondit non seulement les coins de la bordure, mais aussi ceux de l'arrière-plan :

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

Voir aussi