Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
border-bottom-right-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éCSSborder-bottom-right-radius arrondit le coin inférieur droit 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-right-radius: 80px 80px;border-bottom-right-radius: 250px 100px;border-bottom-right-radius: 50%;border-bottom-right-radius: 50%;border: black 10px double;background-clip: content-box;<section> <div> Ceci est une boîte avec un coin arrondi en bas à droite. </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 de cercle *//* border-bottom-right-radius: rayon */border-bottom-right-radius: 3px;/* Valeur avec un pourcentage */border-bottom-right-radius: 20%; /* coin de cercle si la boîte est un carré ou sinon coin de rectangle */border-bottom-right-radius: 20% 20%; /* identique à ci-dessus */ /* 20% de l'horizontal (largeur) et du vertical (hauteur) */border-bottom-right-radius: 20% 10%; /* 20% de l'horizontal (largeur) et 10% du vertical (hauteur) *//* Le coin est une ellipse *//* border-bottom-right-radius: horizontal vertical */border-bottom-right-radius: 0.5em 1em;/* Valeurs globales */border-bottom-right-radius: inherit;border-bottom-right-radius: initial;border-bottom-right-radius: revert;border-bottom-right-radius: revert-layer;border-bottom-right-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. 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 vaut0, 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é raccourcieborder-radius et que cette dernière est appliquée après la propriété CSSborder-bottom-right-radius, la valeur de cette propriété est alors réinitialisée à sa valeur initiale par laproprié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 typetable ouinline-table lorsqueborder-collapse vautcollapse. 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 (<length>) absolues ou deux pourcentages (<percentage>) |
| Type d'animation | unelongueur,pourcentage ou calc() ; |
Syntaxe formelle
border-bottom-right-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></div>div { border-bottom-right-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></div>div { border-bottom-right-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></div>div { border-bottom-right-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></div>div { border-bottom-right-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-left-radius,border-top-right-radius,border-bottom-left-radius