Attribut border-end-end-radius CSS

Page précédente border-color
Page suivante border-end-start-radius

Définition et utilisation

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

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

Si border-end-end-radius Si la propriété a deux valeurs, alors le coin arrondi sera elliptique :

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

Si border-end-end-radius La propriété a une valeur, alors le coin arrondi sera circulaire :

border-end-end-radius: 50px;

CSS border-end-end-radius Les attributs sont similaires à 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-end-radius L'attribut dépend de la direction de bloc et de la direction en ligne.

Exemple

Exemple 1

Ajouter des coins arrondis à la fin de la direction de bloc et de la direction en ligne pour certains éléments :

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

Essayer vous-même

Exemple 2 : combinaison de l'attribut direction

La position des coins arrondis à la fin de la direction de bloc et de la direction en ligne est influencée par direction Impact de l'attribut :

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

Essayer vous-même

Exemple 3 : combinaison de l'attribut writing-mode

La position des coins arrondis à la fin de la direction de bloc et 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-end-end-radius: 25px;
}

Essayer vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
0	Valeur par défaut.
length	Définit la forme arrondie à la fin de la direction de bloc et de la direction en ligne.
%	Définit cette forme arrondie en pourcentage de la longueur de l'élément sur l'axe correspondant.
initial	Définit cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

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