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.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété border-end-end-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés writing-mode, direction et text-orientation.
/* Valeurs de longueur */ /* 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: unset; Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique border-bottom-right-radius.
Syntaxe
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.
Syntaxe formelle
border-end-end-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
Exemples
CSS
div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; } HTML
<div> <p class="texteExemple">Exemple</p> </div> Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # border-radius-properties |
Compatibilité des navigateurs
Chargement…
Voir aussi
- La propriété physique correspondante :
border-bottom-right-radius writing-mode,direction,text-orientation