border-start-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-start-start-radius définit un rayon de bordure logique sur un élément, qui correspond à un rayon de bordure physique selon les valeurs 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 le coin entre les côtés block-start et inline-start de l'élément. Par exemple, en mode d'écriturehorizontal-tb avec une directionltr, elle correspond à la propriétéborder-top-left-radius.

Exemple interactif

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

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

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

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

<section>  <div>    Ceci est une boîte avec un coin arrondi en haut à gauche.  </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 de type <length> *//* Avec une valeur, le coin sera circulaire */border-start-start-radius: 10px;border-start-start-radius: 1em;/* Avec deux valeurs, le coin sera une ellipse */border-start-start-radius: 1em 2em;/* Valeurs globales */border-start-start-radius: inherit;border-start-start-radius: initial;border-start-start-radius: revert;border-start-start-radius: revert-layer;border-start-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-start-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

Bordure arrondie avec un texte vertical

HTML

html

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

CSS

css

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