Propriété CSS border-bottom-right-radius
La propriété CSS border-bottom-right-radius permet de définir l'arrondi du coin inférieur droit de l'élément.
La propriété border-bottom-right-radius fait partie des propriétés CSS3.
La propriété border-bottom-right-radius spécifie les rayons horizontal et vertical qui définissent le coin inférieur droit arrondi pour une boîte de bordure. Cette propriété est définie par deux valeurs : une longueur et un pourcentage. Notez que les valeurs en pourcentage sont calculées par rapport à la largeur de l'élément.
Lorsqu'une seule valeur est fournie, 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. Si aucune valeur n'est définie, le rayon par défaut est de 0px, ce qui donne un coin carré. Si une image ou une couleur d'arrière-plan est utilisée, elle sera recadrée au niveau de la bordure. Le processus de recadrage est défini par la valeur de la propriété background-clip.
INFO
Si la propriété raccourcie border-radius est appliquée après border-bottom-right-radius, elle remplacera la valeur longue.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. Le rayon de la bordure en bas à droite 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 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 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 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 | Tester |
|---|---|---|
| length | Spécifie la forme du coin inférieur droit en « px ». | Tester » |
| % | Spécifie la forme du coin inférieur droit en pourcentage. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Practice
Quelles affirmations concernant la propriété CSS border-bottom-right-radius sont vraies ?