Attribut border-radius CSS
- Page précédente border-left-width
- Page suivante border-right
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; }
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 |
- Page précédente border-left-width
- Page suivante border-right