Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-bottom-left-radius

La propriété border-bottom-left-radius définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.

Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de background-clip.

Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie border-radius et que cette dernière est appliquée après border-bottom-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

Valeur initiale0
Applicabilitétous les éléments, mais les agents utilisateurs ne sont pas tenus de l'appliquer aux éléments de type table ou inline-table lorsque border-collapse vaut collapse. Le comportement sur les éléments de type table interne est pour l'instant indéfini.. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la dimension correspondance de la boîte de bordure
Médiavisuel
Valeur calculéedeux longueurs absolues ou deux pourcentages
Animableoui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Le coin est un quart de cercle         */
/* La valeur indique le rayon de courbure */
border-bottom-left-radius: 3px;

/* Le coin est un quart d'ellipse         */
/* La première valeur indique le demi-axe */
/* horizontal et la seconde le demi-axe   */
/* vertical                               */
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;

Valeurs

<length>
La mesure du rayon ou de l'un des demi-axes de l'ellipse. La valeur est du type <length>. Les valeurs négatives ne sont pas autorisées.
<percentage>
La mesure du rayon ou de l'un des demi-axes de l'ellipse exprimée de façon proportionnelle à la largeur de la boîte pour l'axe horizontal ou à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives ne sont pas autorisées.

Syntaxe formelle

[ <length> | <percentage> ]{1,2}

Exemples

CSS

div {
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 130px;
}

.arc_cercle {
  border-bottom-left-radius: 40px 40px;
}

.arc_ellipse {
  border-bottom-left-radius: 40px 20px;
}

.pourcentage {
  border-bottom-left-radius: 40%;
}

.rognage {
  border: black 10px double;
  border-bottom-left-radius: 40%;
  background-color: rgb(250,20,70);
  background-clip: content-box; // essayez margin-box...
}

HTML

 <div class="arc_cercle"></div>
 <div class="arc_ellipse"></div>
 <div class="pourcentage"></div>
 <div class="rognage"></div>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-bottom-left-radius' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 -webkit
4.0
1.0 (1.0)-moz[1]
4.0 (2.0)[3]
9.0 10.5 3.0 (522)-webkit
5.0 (532.5)
Pourcentages 4.0 1.0 (1.0)[2]
4.0 (2.0)
9.0 10.5 5.0 (532.5)
Coins elliptiques 1.0 3.5 (1.9.1) 9.0 10.5 3.0 (522)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? (Oui)[3] ? ? ?
Pourcentages ? (Oui) ? ? ?
Coins elliptiques ? (Oui) ? ? ?

[1] La version préfixée (existant entre Firefox 1 et Firefox 12) utilisait un nom différent : -moz-border-radius-bottomleft avant que le nom actuel soit choisi.

[2] Avant Firefox 4, le pourcentage était relatif à la largeur de la boîte même lorsqu'on définissait une courbure verticale. Autrement dit -moz-border-radius-bottomleft dessinait toujours un arc de cercle et non une ellipse lorsqu'une seule valeur était utilisée.

[3]  Avant Gecko 50 (Firefox 50.0 / Thunderbird 50.0 / SeaMonkey 2.47), les styles de bordure pour les coins arrondis (avec border-bottom-left-radius) étaient toujours affichés comme si border-style avait la valeur solid. Cela a été corrigé avec Gecko 50.
En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Prinz_Rana, Sebastianz, teoli, ksad, FredB, Yuichiro, Fredchat
 Dernière mise à jour par : SphinxKnight,