Un seul outil dont vous avez besoin pour lancer votre business en ligne.
Et c'est gratuit.

La propriété border-top-right-radius

La propriété border-top-right-radius est utilisée 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.

Somaire
Les propriétés CSS

Définition et utilisation de La propriété border-top-right-radius

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" ;

Appui de navigateur de la propriété border- top-right-radius

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é  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
border- top-right-radius 5.0
4.0 -webkit- 		9.0 4.0
3.0 -moz- 		5.0
3.1 -webkit- 		10.5

Syntaxe CSS de la propriété border-top-right-radius

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.

Valeurs de propriété border-top-right-radius

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.

Exemple
Sélectionner le code

<!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>

Par Gerywa 11 Janvier 2016