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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 !
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.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 |
Valeur calculée | deux longueurs absolues ou deux pourcentages |
Type d'animation | une longueur, pourcentage ou calc() ; |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La propriété raccourcie
border-radius
- Les propriétés pour les autres coins :