Nouveaux attributs de formulaire et input
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.
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>
SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent