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

sélecteur {
	border-radius: valeur;
}

Nombre de valeurs

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

Nombre	Description
`1`	Pour tous les coins simultanément.
`2`	La première valeur définit l'arrondi pour les coins supérieur droit et inférieur gauche, la seconde - pour les coins supérieur gauche et inférieur droit.
`3`	La première valeur définit l'arrondi pour le coin supérieur gauche, la seconde - simultanément pour les coins supérieur droit et inférieur gauche, et la troisième - pour le coin inférieur droit.
`4`	La première valeur définit l'arrondi pour le coin supérieur gauche, la seconde - pour le coin supérieur droit, la troisième - pour le coin inférieur droit, et la quatrième - pour le coin inférieur gauche.

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 :

sé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 :

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

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

Exemple

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

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

#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 :

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

#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 :

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

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

Exemple

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

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

#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 :

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

#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 :

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

#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 :

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

#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 :

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

#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) :

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

#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 :

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

#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 :

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

#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 :

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

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

Voir aussi

la propriété border,
qui est une propriété raccourcie pour la bordure