border-end-end-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 septembre 2021.
La propriété CSS border-end-end-radius définit un rayon de bordure logique sur un élément, qui correspond à un rayon de bordure physique dépendant de writing-mode, direction et text-orientation de l'élément. Ceci est utile pour créer des styles qui fonctionnent quel que soit l'orientation du texte et le mode d'écriture.
Cette propriété affecte l'angle entre les côtés block-end et inline-end de l'élément. Par exemple, dans un mode d'écriture horizontal-tb avec une direction ltr, elle correspond à la propriété border-bottom-right-radius.
Exemple interactif
border-end-end-radius: 80px 80px;
border-end-end-radius: 250px 100px;
direction: rtl;
border-end-end-radius: 50%;
writing-mode: vertical-lr;
border-end-end-radius: 50%;
writing-mode: vertical-rl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec un coin inférieur droit arrondi.
</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #5b6dcd;
color: white;
padding: 10px;
}
Syntaxe
/* Valeurs de type <length> */
/* Avec une valeur, le coin sera circulaire */
border-end-end-radius: 10px;
border-end-end-radius: 1em;
/* Avec deux valeurs, le coin sera une ellipse */
border-end-end-radius: 1em 2em;
/* Valeurs globales */
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: revert;
border-end-end-radius: revert-layer;
border-end-end-radius: unset;
Valeurs
<length-percentage>-
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée
<length>. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
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-end-end-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
Rayon de bordure avec texte vertical
HTML
<div>
<p class="exempleTexte">Exemple</p>
</div>
CSS
div {
background-color: rebeccapurple;
width: 120px;
height: 120px;
border-end-end-radius: 10px;
}
.exempleTexte {
writing-mode: vertical-rl;
padding: 10px;
background-color: white;
border-end-end-radius: 10px;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # border-radius-properties |
Compatibilité des navigateurs
Voir aussi
- Propriétés et valeurs logiques CSS
- La propriété physique correspondante :
border-bottom-right-radius - Les propriétés
writing-mode,direction,text-orientation