Attribut border-radius CSS

Définition et utilisation

La propriété border-radius est une propriété abrégée qui permet de définir les quatre propriétés border-*-radius.

Astuce :Cette propriété vous permet d'ajouter des bords arrondis à l'élément.

Voir également :

Tutoriel CSS3 :Bordure CSS3

Exemple

Ajouter un bord arrondi à l'élément div :

div
{
border:2px solid;
border-radius:25px;
}

Essayez-le vous-même

Vous trouverez plus d'exemples en bas de la page.

Syntaxe CSS

border-radius: 1-4 length|% / 1-4 length|%;

Remarque :Définir les quatre valeurs de chaque radii dans cet ordre. Si bottom-left est omis, il est égal au top-right. Si bottom-right est omis, il est égal au top-left. Si top-right est omis, il est égal au top-left.

Valeur de l'attribut

Valeur Description Test
length Définir la forme des coins. Test
% Définir la forme des coins en pourcentage. Test

Exemple 1

border-radius:2em;

Équivalent à :

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Exemple 2

border-radius: 2em 1em 4em / 0.5em 3em;

Équivalent à :

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Détails techniques

Valeur par défaut : 0
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.borderRadius="5px"

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge pleinement cette propriété.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5