La propriété CSS3 border-top-left-radius

La propriété border-top-left-radius est utilisée lors de l'ajout de bords arrondis à vos bordures. Cette propriété permet de définir le rayon du coin supérieur gauche de la frontière.

Les propriétés CSS

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é  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
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
  • HTML5, CSS3, JavaScript pour débutants Tome 1 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 :

    fonction substr_count, substr_count

    Compte le nombre d'occurrences de segments dans une chaîne

    Balise keygen

    Définit un champ générateur de paire de clés (pour les formulaires)

    text-indent

    Spécifie l'indentation de la première ligne dans un bloc de texte