border-bottom-left-radius
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS border-bottom-left-radius arrondit le coin inférieur gauche d'un élément en définissant le rayon (ou les rayons des axes semi-majeur et semi-mineur) de l'ellipse qui détermine la courbure du coin.
Exemple interactif
border-bottom-left-radius: 80px 80px;
border-bottom-left-radius: 250px 100px;
border-bottom-left-radius: 50%;
border-bottom-left-radius: 50%;
border: black 10px double;
background-clip: content-box;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec un coin arrondi en bas à gauche.
</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #5b6dcd;
color: white;
padding: 10px;
}
Syntaxe
/* Le coin est un cercle */
/* border-bottom-left-radius: rayon */
border-bottom-left-radius: 3px;
/* Valeurs avec un pourcentage */
/* cercle si la boîte est un carré ou ellipse si la boîte est un rectangle */
border-bottom-left-radius: 20%;
/* identique à ci-dessus : 20% de l'horizontal (largeur) et du vertical (hauteur) */
border-bottom-left-radius: 20% 20%;
/* 20% de l'horizontal (largeur) et 10% du vertical (hauteur) */
border-bottom-left-radius: 20% 10%;
/* le coin est une ellipse */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;
/* Valeurs globales */
border-bottom-left-radius: inherit;
border-bottom-left-radius: initial;
border-bottom-left-radius: revert;
border-bottom-left-radius: revert-layer;
border-bottom-left-radius: unset;
Avec une valeur :
- la valeur est une longueur (
<length>) ou un pourcentage (<percentage>) qui indique le rayon du cercle à utiliser pour la bordure de ce coin.
Avec deux valeurs :
- la première valeur est une longueur (
<length>) ou un pourcentage (<percentage>) qui indique le demi-axe horizontal de l'ellipse à utiliser pour la bordure de ce coin. - la seconde valeur est une longueur (
<length>) ou un pourcentage (<percentage>) qui indique le demi-axe vertical de l'ellipse à utiliser pour la bordure de ce coin.
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.
Description
L'arrondi peut être un cercle ou une ellipse, ou si l'une des valeurs vaut 0, aucun arrondi n'est appliqué et le coin est carré.
Un arrière-plan, qu'il s'agisse d'une image ou d'une couleur, est rogné à la bordure, même si elle est arrondie ; l'endroit exact du rognage est défini par la valeur de la propriété 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 la propriété CSS border-bottom-left-radius, la valeur de cette propriété est alors réinitialisée à sa valeur initiale par la propriété raccourcie.
Définition formelle
| 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 |
| Valeur calculée | deux longueurs absolues ou deux pourcentages |
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
border-bottom-left-radius =
<border-radius>
<border-radius> =
<slash-separated-border-radius-syntax> |
<legacy-border-radius-syntax>
<slash-separated-border-radius-syntax> =
<length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?
<legacy-border-radius-syntax> =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
Exemples
Arc de cercle
Une seule valeur <length> produit un arc de cercle.
div {
border-bottom-left-radius: 40px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Arc d'une ellipse
Deux valeurs <length> différentes produisent un arc d'ellipse.
div {
border-bottom-left-radius: 40px 20px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Élément carré avec un rayon en pourcentage
Un élément carré avec une seule valeur <percentage> produit un arc de cercle.
div {
border-bottom-left-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Élément qui n'est pas un carré avec un rayon en pourcentage
Un élément qui n'est pas un carré avec une seule valeur <percentage> produit un arc d'ellipse.
div {
border-bottom-left-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 200px;
height: 100px;
}
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-radius |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
border-radius - Les propriétés
border-top-right-radius,border-top-left-radiusetborder-bottom-right-radius