Exemple
Ajouter des bordures arrondies à un <div> élément:
div
{
border: 2px solid;
border-radius: 25px;
}
Essayez - le vous - même » Définition et utilisation
La propriété border-radius est un raccourci pour définir les quatre frontières - * - propriétés de rayon.
Tip: Cette propriété vous permet d'ajouter des bordures arrondies à des éléments!
| Valeur par défaut: | 0 |
|---|---|
| Hérité: | no |
| Animable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.borderRadius="25px" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
Syntaxe CSS
border-radius:1-4 length|%/1-4 length|%|initial|inherit;Note: Les quatre valeurs pour chaque rayons sont donnés dans l'ordre en haut à gauche, en haut à droite, en bas à droite, en bas à gauche. Si inférieur gauche est omis, il est le même que en haut à droite. Si en bas à droite est omis, il est le même que en haut à gauche. Si en haut à droite est omis, il est le même que en haut à gauche.
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| length | Définit la forme des coins. La valeur par défaut est 0 | Joue-le " |
| % | Définit la forme des coins en% | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Exemple 1
border-radius:2em;
is equivalent to:
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;
is equivalent to:
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;
Pages associées
CSS3 tutoriel: CSS3 Borders
Référence HTML DOM: borderRadius property