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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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.Syntaxe
/* Le coin est un quart de cercle */ /* La valeur indique le rayon de courbure */ border-bottom-left-radius: 3px; /* Valeurs avec un pourcentage */ border-bottom-left-radius: 20%; /* 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;
Cette propriété peut prendre deux formes :
- Une première avec une longueur (
<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin - Une seconde avec deux valeurs
- La première est une longueur (
<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin - La seconde est une longueur (
<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
- La première est une longueur (
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. |
| 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 |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 4 1 -webkit- | 12 12 -webkit- | 41 49 -webkit- 1 — 123 | 9 | 10.5 | 5 3 -webkit- |
| Percentages | 4 | 12 | 4 14 | 9 | 10.5 | 5 |
| Ellipitcal corners | 1 | 12 | 3.5 | 9 | 10.5 | 3 |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | ? | ? | Oui Oui -webkit- | Oui1 | ? | ? | ? |
| Percentages | ? | ? | Oui | Oui | ? | ? | ? |
| Ellipitcal corners | ? | ? | Oui | Oui | ? | ? | ? |
1. Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
3. Supported as -moz-border-radius-topright.
4. Before Firefox 4, the <percentage> was relative to the width of the box even when specifying the radius for a height. This implied that -moz-border-radius-topright was always drawing an arc of circle, and never an ellipse, when followed by a single value.
Voir aussi
- La propriété raccourcie
border-radius - Les propriétés pour les autres coins :