Définition et utilisation de la propriété CSS3 border-top-left-radius
La propriété border-top-left-radius définit la forme du coin supérieur gauche de la bordure d’un élément HTML.
| Valeur par défaut : | 0 |
| Héritée : | no |
| Animer : | Oui. |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet. style.borderTopLeftRadius="25px" |
Appui de navigateur de la propriété CSS3 border-top-left-radius
Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété border-top-left-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-left-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-left-radius
border-top-left-radius: length|% [length|%]|initial|inherit;
Remarque : Les deux valeurs longueur ou pourcentage des propriétés border-top-left-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 deuxième valeur est le rayon vertical. Si la deuxième valeur est omise elle est copiée à partir de la première. Si chaque longueur est nulle, le coin est carré, et non pas arrondis.
Valeurs de propriété border-top-left-radius
| Valeur | Description |
|---|---|
| length | Définit la forme du coin supérieur gauche en: px, pt, cm, em, etc... |
| % | Définit la forme du coin supérieur gauche 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">
.bordures-arrondies {
width:200px;
height:80px;
padding:10px;
border: 1px solid red;
-webkit-border-top-left-radius: 25px 15px; /* Safari and Chrome */
-moz-border-top-left-radius: 25px 15px; /* Firefox */
-ms-border-top-left-radius: 25px 15px; /* Internet Explorer */
-o-border-top-left-radius: 25px 15px; /* Opera */
border-top-left-radius: 25px 15px; /* CSS3 */
}
</style>
</head>
<body>
<div class="bordures-arrondies">
Cet élément a le coin supérieur gauche arrondie.
</div>
</body>
</html>
Par Gerywa 11 Janvier 2016