Attribut border-end-start-radius CSS

Définition et utilisation

border-end-start-radius La propriété est utilisée pour définir le rayon de l'arrondi entre la fin de l'élément de bloc (block-end) et le début de la direction de ligne (inline-start).

Attention :les propriétés CSS associées writing-mode,text-orientation et direction Définit la direction de bloc et la direction de ligne. C'est pourquoi ces propriétés influencent également border-end-start-radius Le résultat de la propriété. Pour les pages en anglais, la direction de ligne est de gauche à droite, et la direction de bloc est vers le bas.

Si border-end-start-radius Si une propriété CSS a deux valeurs, alors l'arrondi sera elliptique :

border-end-start-radius: 50px 100px;

Si border-end-start-radius Si une propriété CSS a une valeur, alors l'arrondi sera circulaire :

border-end-start-radius: 50px;

CSS border-end-start-radius Propriétés et border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius et border-top-right-radius Les attributs sont très similaires, mais border-end-start-radius L'attribut dépend de la direction de bloc et de la direction en ligne.

Exemple

Exemple 1

Ajouter des arrondis aux coins des éléments en fin de direction de bloc et au début de direction en ligne :

#example1 {
  background-color: lightblue;
  border-end-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut direction

La position de l'angle arrondi à la fin de la direction de bloc et au début de la direction en ligne est affectée par direction Effet de l'attribut :

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-start-radius: 25px;
}

Essayez-le vous-même

Exemple 3 : combinaison de l'attribut writing-mode

La position de l'angle arrondi à la fin de la direction de bloc et au début de la direction en ligne est affectée par writing-mode Effet de l'attribut :

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-start-radius: 25px;
}

Essayez-le vous-même

Syntaxe CSS

border-end-start-radius: 0|length|initial|inherit;

Valeur de l'attribut

Détails techniques

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

pages liées

Tutoriel :Coins arrondis CSS

Référence :Attribut border-bottom-left-radius CSS

Référence :Attribut border-bottom-right-radius CSS

Référence :Attribut border-top-left-radius CSS

Référence :Attribut border-top-right-radius CSS

Référence :Propriété direction de CSS

Référence :Attribut text-orientation CSS

Référence :Attribut writing-mode CSS