Propriété CSS border-bottom-left-radius
La propriété border-bottom-left-radius spécifie l'arrondi du coin inférieur gauche de l'élément.
La propriété border-bottom-left-radius fait partie des propriétés CSS3.
Si vous ne spécifiez pas de valeur, le coin reste carré. Lorsqu'une valeur est fournie, elle crée un quart d'ellipse. Si vous utilisez une image d'arrière-plan ou une couleur, elle sera rognée au niveau de la bordure. Le processus de rognage est défini par la valeur de la propriété background-clip.
La propriété border-bottom-left-radius accepte deux valeurs : une longueur et un pourcentage. Lorsqu'une seule valeur est indiquée, elle spécifie à la fois les rayons horizontal et vertical de l'ellipse. Si deux valeurs sont fournies, la première définit le rayon horizontal et la seconde le rayon vertical.
Les pourcentages pour le rayon horizontal se réfèrent à la largeur de la boîte, ceux pour le rayon vertical se réfèrent à la hauteur de la boîte. Les valeurs négatives ne sont pas autorisées.
Si la propriété raccourcie border-radius est appliquée après border-bottom-left-radius, elle remplace la valeur de la propriété individuelle.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. Le rayon de la bordure inférieure gauche est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.borderBottomLeftRadius = "35px"; |
Syntaxe
Syntaxe de la propriété CSS border-bottom-left-radius
border-bottom-left-radius: length| % | initial | inherit;Exemple de la propriété border-bottom-left-radius :
Exemple de la propriété CSS border-bottom-left-radius avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Résultat
Exemple de la propriété border-bottom-left-radius avec deux valeurs :
Exemple de la propriété CSS border-bottom-left-radius avec deux valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Exemple de la propriété border-bottom-left-radius avec la valeur « pourcentage » :
Exemple de la propriété CSS border-bottom-left-radius avec une valeur en %(pourcentage)
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background-color: #666;
padding: 10px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| length | Spécifie l'arrondi du coin inférieur gauche en « px ». | Tester » |
| % | Spécifie l'arrondi du coin inférieur gauche en pourcentage. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quel est l'objectif de la propriété 'border-bottom-left-radius' en CSS ?