border-end-start-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éCSSborder-end-start-radius définit un rayon de bordure logique sur un élément, qui correspond à un rayon de bordure physique dépendant dewriting-mode,direction ettext-orientation de l'élément. Ceci est utile pour créer des styles qui fonctionnent quel que soitl'orientation du texte et lemode d'écriture.

Cette propriété affecte l'angle entre les côtés block-end et inline-start de l'élément. Par exemple, dans un mode d'écriturehorizontal-tb avec une directionltr, elle correspond à la propriétéborder-bottom-left-radius.

Exemple interactif

border-end-start-radius: 80px 80px;

border-end-start-radius: 250px 100px;direction: rtl;

border-end-start-radius: 50%;writing-mode: vertical-lr;

border-end-start-radius: 50%;writing-mode: vertical-rl;

<section>  <div>    Ceci est une boîte avec un coin inférieur gauche 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

css

/* Valeurs detype <length> *//* Avec une valeur, le coin sera circulaire */border-end-start-radius: 10px;border-end-start-radius: 1em;/* Avec deux valeurs, le coin sera une ellipse */border-end-start-radius: 1em 2em;/* Valeurs globales */border-end-start-radius: inherit;border-end-start-radius: initial;border-end-start-radius: revert;border-end-start-radius: revert-layer;border-end-start-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 (`<length>`) absolues ou deux pourcentages (`<percentage>`)
Type d'animation	unelongueur,pourcentage ou calc() ;

Syntaxe formelle

border-end-start-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

html

<div>  <p>Exemple</p></div>

CSS

css

div {  background-color: rebeccapurple;  width: 120px;  height: 120px;  border-end-start-radius: 10px;}.exempleTexte {  writing-mode: vertical-rl;  padding: 10px;  background-color: white;  border-end-start-radius: 10px;}