Exemple
Ajouter une bordure arrondie vers le coin inférieur gauche d'un <div> élément:
div
{
border: 2px solid;
border-bottom-left-radius: 2em;
}
Essayez - le vous - même » Définition et utilisation
La propriété border-bottom-left-radius définit la forme de la frontière du coin inférieur gauche.
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.borderBottomLeftRadius="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-bottom-left-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
Syntaxe CSS
border-bottom-left-radius:length|%[length|%]|initial|inherit;Note: Les deux valeurs de longueur ou en pourcentage des propriétés border-bottom-left-rayon définir les rayons d'un quart d' ellipse qui définit la forme du coin du bord extérieur des frontières. La première valeur est le rayon horizontal, le deuxième rayon vertical. Si la deuxième valeur est omis, il est copié à partir du premier. Si une longueur est égale à zéro, le coin est carré, pas arrondi. Les pourcentages pour le rayon horizontal se réfèrent à la largeur de la zone frontalière, alors que les pourcentages pour le rayon vertical se réfèrent à la hauteur de la zone frontalière.
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| length | Définit la forme du coin inférieur gauche. La valeur par défaut est 0 | Joue-le " |
| % | Définit la forme du coin inférieur gauche 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 |
Pages associées
CSS3 tutoriel: CSS3 Borders
Référence HTML DOM: borderBottomLeftRadius property