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é CSS border-end-start-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-start de l'élément. Par exemple, dans un mode d'écriture horizontal-tb avec une direction ltr, 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 class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    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` absolues ou deux `pourcentages`
Type d'animation	une longueur, 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 class="exempleTexte">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;
}

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-top-right-radius
Les propriétés writing-mode, direction, text-orientation

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 30 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content