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

La propriété border-bottom-right-radius définit la forme arrondie pour le coin "en bas à droite" d'une  frontière d'un élément.

\nLes propriétés CSS

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é  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
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
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction strlen, strlen

    Calcule la taille d'une chaîne

    svg path

    Les chemin pour déssiner en SVG   partie 1 tracer des lignes droites et des formes en lignes droites

    Géolocalisation en temps réel et Recherche d'adresses IP inversées REST API

    Il permet de trouvez la ville, la région, le pays, le continent, la latitude, la longitude, le fuseau horaire, le décalage UTC, la devise, la langue, l'asn, l'organisation, l'indicatif téléphonique du pays, le membre de l'Union européenne (UE) à partir d'une adresse IP.