OUJOOD.COM
Définition et utilisation de la propriété border-bottom-right-radius
La propriété border-bottom-right-radius définit la forme de la bordure de la partie inférieure droite.
| Valeur par défaut : | 0 |
| Héritée : | no |
| Animer : | Oui. |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet. style.borderBottomRightRadius="35px" |
Syntaxe CSS de la propriété border-bottom-right-radius
border-bottom-right-radius: length|% [length|%]|initial|inherit;
Remarque : Les deux valeurs longueur ou pourcentage des propriétés border-bottom-right-radius définissent les rayons d’un quart de l'ellipse qui définit la forme du coin de la bordure de la frontière extérieure. La première valeur est le rayon horizontal, la second le rayon vertical. Si la deuxième valeur est omise on lui donne la valeur de la première. Si chaque longueur est nulle, le coin est carré, non pas arrondis.
Valeurs de la propriété border-bottom-right-radius
| Valeur | Description |
|---|---|
| length | Un nombre définissant le rayon de l’arrondie. La valeur par défaut est 0 |
| % | Un pourcentage définissant le rayon de l’arrondie. La valeur par défaut est 0. |
| initial | Met la valeur de la propriété à sa valeur par défaut. |
| inherit | Si cette valeur est indiquée, la propriété est héritée du parent. |
Appui de navigateurs de la propriété CSS border-bottom- right-radius
Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété border-bottom-right-radius.
Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné avec ce préfixe.
| Propriété | Navigateur |  |  |  |  |  |
| border-bottom-right-radius |
5.0 4.0 -webkit- |
9.0 |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Exemple utilisation de nombre pour définir le rayon de l’arrondi
Sélectionner le code
<!doctype html>
<html>
<head>
<style type="text/css">
.rounded-border {
width:300px;
height:100px;
padding:5px;
border: 1px solid #A22866;
border-bottom-right-radius: 35px 20px;
-webkit-border-bottom-right-radius: 35px 20px; /* Chrome et Safari */
-moz-border-bottom-right-radius: 35px 20px; /* Firefox */
-ms-border-bottom-right-radius: 35px 20px; /* Internet Explorer */
-o-border-bottom-right-radius: 35px 20px; /* Opera */
}
</style>
</head>
<body>
<div class="rounded-border">
cette boite a le coin inferieur droit arrondi
</div>
</body>
</html>
Exemple utilisation de pourcentage pour définir le rayon de l’arrondi
Sélectionner le code
<!doctype html>
<html>
<head>
<style type="text/css">
.rounded-border {
width:300px;
height:100px;
padding:5px;
border: 1px solid #A22866;
border-bottom-right-radius: 50% 30%;
-webkit-border-bottom-right-radius: 50% 30%; /* Chrome et Safari */
-moz-border-bottom-right-radius: 50% 30%; /* Firefox */
-ms-border-bottom-right-radius: 50% 30%; /* Internet Explorer */
-o-border-bottom-right-radius: 50% 30%; /* Opera */
}
</style>
</head>
<body>
<div class="rounded-border">
Cette boite a le coin inferieur droit arrondi
</div>
</body>
</html>
Par Gerywa 11 Janvier 2016