border-start-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-start-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-start-end-radius: 10px;
border-start-end-radius: 1em;
/* Avec deux valeurs, le coin sera une ellipse */
border-start-end-radius: 1em 2em;
/* Valeurs globales */
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: unset;
Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique border-bottom-left-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-start-end-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
Exemples
CSS
div {
background-color: rebeccapurple;
width: 120px;
height: 120px;
border-start-end-radius: 10px;
}
.texteExemple {
writing-mode: vertical-rl;
padding: 10px;
background-color: #fff;
border-start-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-left-radius writing-mode,direction,text-orientation