Propriété CSS border-bottom-left-radius
CSS border-bottom-left-radius arrondit le coin inférieur gauche d'un élément. Syntaxe, valeurs et exemples.
La propriété border-bottom-left-radius définit l'arrondi du coin inférieur gauche d'un élément.
La propriété border-bottom-left-radius fait partie des propriétés CSS3.
Si aucune valeur n'est spécifiée, 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 découpée au niveau de la bordure. Le processus de découpe 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 donnée, elle définit à la fois les rayons horizontal et vertical de l'ellipse. Si deux valeurs sont données, la première définit le rayon horizontal et la seconde définit le rayon vertical.
Les pourcentages pour le rayon horizontal se réfèrent à la largeur de la boîte, et les pourcentages 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. Pour cette raison, lorsque vous définissez les coins individuellement, déclarez-les après tout raccourci border-radius. La propriété border-bottom-left-radius est particulièrement utile lorsque vous souhaitez arrondir un seul coin d'un élément — par exemple, une bulle de discussion, une carte avec un seul coin arrondi, ou un bouton de forme personnalisée — tout en laissant les trois autres coins carrés.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animatable | Oui. Le rayon du coin inférieur gauche de la bordure est animatable. |
| 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>Ici, 30px est le rayon horizontal et 15px est le rayon vertical, produisant un coin elliptique (et non circulaire) plus large que haut.
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 %(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 | Essayer |
|---|---|---|
| length | Définit l'arrondi du coin inférieur gauche en "px". | Essayer » |
| % | Définit l'arrondi du coin inférieur gauche en pourcentage. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété de son élément parent. |
Compatibilité des navigateurs
La propriété border-bottom-left-radius est prise en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari, Edge et Opera. Aucun préfixe de fournisseur n'est nécessaire aujourd'hui.
Propriétés associées
border-bottom-left-radius contrôle un seul coin. Pour arrondir d'autres coins ou tous les coins à la fois, utilisez ces propriétés associées :
- border-radius — raccourci qui définit les quatre coins en une seule déclaration.
- border-bottom-right-radius — arrondit le coin inférieur droit.
- border-top-left-radius — arrondit le coin supérieur gauche.
- border-top-right-radius — arrondit le coin supérieur droit.