Attribut border-start-start-radius CSS

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

définition et utilisation

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

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

si border-start-start-radius si une propriété a deux valeurs, alors l'angle arrondi sera elliptique :

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

si border-start-start-radius si une propriété a une valeur, alors l'angle arrondi sera circulaire :

border-start-start-radius: 50px;

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

Exemple

Exemple 1

Ajoutez des coins arrondis aux angles de début de la direction en bloc et de la direction en ligne pour certains éléments :

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

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut direction

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

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

Essayez-le vous-même

Exemple 3 : combinaison de l'attribut writing-mode

La position des coins arrondis de la direction en 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-start-start-radius: 25px;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
0	Valeur par défaut.
length	Définit la forme arrondie des angles de début de la direction en bloc et de la direction en ligne. Voir :Unités CSS.
%	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.borderStartStartRadius="50px"