Propriété CSS border-bottom-left-radius
La propriété border-bottom-left-radius spécifie l'arrondissement du coin inférieure-gauche de l'élément. Il existe trois types des formes: un cercle ou une ellipse, si on n'utilise aucune valeur, le coin est carré. Si vous utiliser une image de fond ou une couleur, elle sera taillée à la bordure. Le procès de coupure est définit par la valeur de la propriété background-clip.
La propriété border-bottom-left-radius a deux valeurs: length et percentage. S'il y a seulement une valeur utilisée, cette valeur spécifie les radius horizontal et vertical de l'ellipse. Si on utilise les deux valeurs, la première définit le radius horizontal et la deuxième définit le vértical.
Les pourcentages pour le radius horizontal s'appliquent au largeur de la boîte, les pourcentages pour le radius vértical s'appliquent à l'hauteur de la boîte. Les valeurs négatives sont invalides.
| Valeur initiale | 0 |
| Appliquée à | Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter. |
| Héritée | Non. |
| Animable | Oui. Le radius de la bordure inférieure-gauche est animable. . |
| Version | CSS3 |
| Syntaxe DOM | object.style.borderBottomLeftRadius = "35px"; |
Syntaxe
border-bottom-left-radius: length| % | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Exemple de border-bottom-left-radius.</h2>
<div></div>
</body>
</html>Résultat
Essayons un autre exemple avec deux valeurs.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Exemple de border-bottom-left-radius.</h2>
<div></div>
</body>
</html>Résultat
Voici un exemple avec 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>Exemple de border-bottom-left-radius.</h2>
<div></div>
</body>
</html>Résultat
Valeurs
| Valeur | Description |
|---|---|
| length | Spécifie la formation du coin inférieure-gauche par "px". |
| % | Spécifie la formation du coin inférieure-gauche en pourcentage. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 4.0+ | 4.0+ | 5.0+ | 10.5+ |
Pratiquez vos connaissances
