Proprietà CSS border-start-start-radius

Pagina precedente border-start-end-radius
Pagina successiva border-style

Definizione e uso

border-start-start-radius l'attributo viene utilizzato per definire il raggio dell'angolo arrotondato tra l'inizio della direzione di blocco (block-start) e l'inizio della direzione in linea (inline-start) dell'elemento.

Attenzione:altri attributi CSS writing-mode,text-orientation e direction definisce la direzione di blocco e la direzione in linea. Ecco perché questi attributi influenzano anche border-start-start-radius risultato dell'attributo. Per le pagine in inglese, la direzione in linea è da sinistra a destra, e la direzione di blocco è verso il basso.

se border-start-start-radius Se un attributo ha due valori, il angolo arrotondato sarà ellittico:

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

se border-start-start-radius Se un attributo ha un valore, il angolo arrotondato sarà circolare:

border-start-start-radius: 50px;

CSS border-start-start-radius proprietà e border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius e border-top-right-radius è molto simile ma border-start-start-radius L'attributo dipende dalla direzione del blocco e della direzione in linea.

Esempio

Esempio 1

Aggiungi arrotondamenti all'inizio della direzione del blocco e della direzione in linea di alcuni elementi:

#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;
}

Prova personalmente

Esempio 2: Combinazione dell'attributo direction

La posizione arrotondata all'inizio della direzione del blocco e della direzione in linea è influenzata da direction Impatto dell'attributo:

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

Prova personalmente

Esempio 3: Combinazione dell'attributo writing-mode

La posizione arrotondata all'inizio della direzione del blocco e della direzione in linea è influenzata da writing-mode Impatto dell'attributo:

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

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
0	Valore predefinito.
length	Definisce la forma arrotondata all'inizio della direzione del blocco e della direzione in linea. Vedi:Unità CSS.
%	Definisce la forma arrotondata utilizzando la percentuale della lunghezza dell'elemento sull'asse corrispondente.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Incorpora questo attributo dall'elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	0
Ereditarietà:	No
Produzione dell'animazione:	Supportato. Vedi:Proprietà correlate con l'animazione.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderStartStartRadius="50px"