Propriété CSS border-bottom-right-radius
CSS border-bottom-right-radius arrondit le coin inférieur droit d'un élément. Syntaxe, valeurs et exemples interactifs.
La propriété CSS border-bottom-right-radius arrondit uniquement le coin inférieur droit de la boîte de bordure d'un élément. C'est l'une des quatre propriétés longhand — aux côtés de border-top-left-radius, border-top-right-radius et border-bottom-left-radius — que la propriété raccourcie border-radius regroupe. Utilisez la forme longhand lorsque vous souhaitez arrondir un seul coin et laisser les autres anguleux. Elle fait partie des propriétés CSS3.
Fonctionnement
Le coin est dessiné comme un quart d'ellipse défini par un rayon horizontal et un rayon vertical :
- Une valeur définit les deux rayons, produisant un coin parfaitement circulaire (symétrique).
- Deux valeurs définissent d'abord le rayon horizontal puis le rayon vertical, produisant un coin elliptique.
- Les pourcentages sont résolus par rapport à la boîte de l'élément : le rayon horizontal est un pourcentage de la largeur, le rayon vertical un pourcentage de la hauteur.
Si aucune valeur n'est définie, le rayon est 0, laissant un coin carré et net. Une couleur ou une image d'arrière-plan est découpée selon le coin arrondi ; vous pouvez modifier l'endroit où se produit ce découpage avec la propriété background-clip.
Quelques points à garder à l'esprit :
- Les valeurs négatives sont invalides — le coin reste à
0. - La propriété est animable, ce qui permet aux coins de se transformer en douceur au survol (
:hover) ou via des images-clés. - La prise en charge par les navigateurs est universelle dans les navigateurs modernes et dans toutes les versions d'Internet Explorer à partir d'IE9.
border-bottom-right-radius est une propriété longhand. Si la propriété raccourcie border-radius est déclarée après elle dans la même règle, le raccourci réinitialise les quatre coins et remplace cette valeur. Ordonnez vos déclarations en conséquence.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritage | Non. |
| Animable | Oui. Le rayon du coin inférieur droit de la bordure est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.borderBottomRightRadius = "15px"; |
Syntaxe
Propriété CSS border-bottom-right-radius
border-bottom-right-radius: length | % | initial | inherit;Exemple de la propriété border-bottom-right-radius :
Exemple de la propriété CSS border-bottom-right-radius avec une valeur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Résultat
Exemple de la propriété border-bottom-right-radius avec deux valeurs :
Exemple de la propriété CSS border-bottom-right-radius avec deux valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #eee;
border: 4px solid #666;
border-bottom-right-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Exemple de la propriété border-bottom-right-radius avec la valeur « pourcentage » :
Exemple de la propriété CSS border-bottom-right-radius avec une valeur en pourcentage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-bottom-right-radius: 30% 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| length | Définit la forme du coin inférieur droit en pixels (px). | Essayer » |
| % | Définit la forme du coin inférieur droit en pourcentage. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
- border-radius — le raccourci qui définit les quatre coins en une seule fois.
- border-top-left-radius, border-top-right-radius, border-bottom-left-radius — les trois autres propriétés longhand pour les coins.
- background-clip — contrôle la façon dont un arrière-plan est découpé aux coins arrondis.