La propriété border-top-right-radius est utilisée si vous voulez 'ajouter de bords arrondis à vos bordures. Cette propriété permet de définir le rayon du coin supérieur droit de la frontière d’un élément
La propriété CSS border-top-right-radius arrondit le coin supérieur droit d'un élément en spécifiant le rayon de la courbure.
La propriété border-top-right-radius définit la forme de la bordure du haut-droite.
Valeur par défaut : | 0 |
Héritée : | no |
Animer : | Oui. |
Version: | CSS3 |
Syntaxe JavaScript : | objet. style.borderTopRightRadius="20px" ; |
Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété border- top-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- top-right-radius |
5.0 4.0 -webkit- |
9.0 |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
border-top-right-radius: length|% [length|%]|initial|inherit;
Remarque : Les deux valeurs longueur ou pourcentage des propriétés border-top-right-radius définissent les rayons du 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 seconde valeur est le rayon vertical. Si la deuxième valeur est omise il est copié à partir de la première. Si les deux valeurs sont nulles, le coin est carré, et non pas arrondis.
Valeur | Description |
---|---|
length | Un nombre qui défini le rayon du coin supérieur droit en px, pt, cm, mm, em … |
% | Un nombre qui défini le rayon du coin supérieur droit en % |
initial | Définit cette propriété à sa valeur par défaut. |
inherit | Hérite cette propriété de son élément parent. |
<!doctype html>
<html>
<head>
<style type="text/css">
.rounded-border {
width:300px;
height:100px;
padding:15px;
border: 1px solid red;
-webkit-border-top-right-radius: 30px 50px; /* Safari et Chrome */
-moz-border-top-right-radius: 30px 50px; /* Firefox */
-ms-border-top-right-radius: 30px 50px; /* Internet Explorer */
-o-border-top-right-radius: 30px 50px; /* Opera */
border-top-right-radius: 30px 50px; /* CSS3 */
}
</style>
</head>
<body>
<div class="rounded-border">
c'est un élément avec le coin supperieur droit arrondi
</div>
</body>
</html>
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT