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
.
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 initiale | 0 |
---|---|
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ée | non |
Pourcentages | se rapporte à la dimension correspondance de la boîte de bordure |
Média | visuel |
Valeur calculée | deux longueurs absolues ou deux pourcentages |
Type d'animation | une longueur, pourcentage ou calc() ; |
Ordre canonique | l'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-percentage>
- La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type
<length>
. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
Syntaxe formelle
<length-percentage>{1,2}où
<length-percentage> = <length> | <percentage>
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
- La propriété raccourcie
border-radius
- Les propriétés pour les autres coins :