Définit la largeur de la bordure droite
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.
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é | Navigateur |  |  |  |  |  |
| 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
-
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 :