Attribut border-start-end-radius CSS

page précédente border-spacing
page suivante border-start-start-radius

Définition et utilisation

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

Attention :les propriétés CSS associées writing-mode,text-orientation et direction défini la direction de bloc et la direction de ligne. C'est pourquoi ces propriétés influencent également border-start-end-radius 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-start-end-radius si une propriété a deux valeurs, le coin arrondi sera elliptique :

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

si border-start-end-radius si une propriété a une valeur, le coin arrondi sera circulaire :

border-start-end-radius: 50px;

CSS border-start-end-radius propriété 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-start-end-radius L'attribut dépend de la direction en bloc et en ligne.

Exemple

Exemple 1

Ajoutez des arrondis aux coins des éléments en bloc directionnel et en direction en ligne :

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

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut direction

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

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

Essayez-le vous-même

Exemple 3 : combinaison de l'attribut writing-mode

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

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
0	Valeur par défaut.
length	Définit la forme arrondie à la fois au début de la direction en bloc et à la fin de la direction en ligne. Voir :Unités CSS.
%	Définit la forme arrondie en pourcentage de la longueur de l'élément sur l'axe correspondant.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits cette propriété de son élément parent. Voir : inherit.

Détails techniques

Valeur par défaut :	0
Héritabilité :	Non
Création d'animation :	Pris en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.borderStartEndRadius="50px"