Propriété CSS border-bottom-left-radius
Exemple
Ajoutez des bordures arrondies au coin inférieur gauche de deux éléments <div> :
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-radius: 50px
20px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La border-bottom-left-radius
propriété définit le rayon du coin inférieur gauche.
Astuce : Cette propriété permet d'ajouter des bordures arrondies aux éléments !
Valeur par défaut: | 0 |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.borderBottomLeftRadius="25px" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
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;
Remarque : Si vous définissez deux valeurs, la première est pour la bordure inférieure et la seconde pour la bordure gauche. Si la deuxième valeur est omise, elle est copiée à partir de la première. Si l'une des longueurs est nulle, le coin est carré et non arrondi.
Valeurs de propriété
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Ajoutez des bordures arrondies au coin inférieur gauche en pourcentage :
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
Pages connexes
Tutoriel CSS : Coins arrondis CSS
Référence HTML DOM : propriété borderBottomLeftRadius