La propriété CSS3 border-bottom-right-radius

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