Proprietà CSS border-start-end-radius

Pagina precedente border-spacing
Pagina successiva border-start-start-radius

Definizione e utilizzo

border-start-end-radius la proprietà viene utilizzata per definire il raggio dell'angolo arrotondato tra l'inizio della direzione bloccata (block-start) e la fine della direzione inline (inline-end).

Attenzione:proprietà CSS correlate writing-mode,text-orientation e direction definisce la direzione bloccata e la direzione inline. Ecco perché queste proprietà influenzano anche border-start-end-radius risultato della proprietà. Per le pagine in inglese, la direzione inline è da sinistra a destra, e la direzione bloccata è verso il basso.

se border-start-end-radius se una proprietà ha due valori, l'angolo arrotondato sarà ellittico:

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

se border-start-end-radius se una proprietà ha un valore, l'angolo arrotondato sarà circolare:

border-start-end-radius: 50px;

CSS border-start-end-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-end-radius L'attributo dipende dalla direzione del blocco e della direzione inline.

Esempio

Esempio 1

Aggiungi arrotondamenti alla parte iniziale della direzione del blocco e alla fine della direzione inline di alcuni elementi:

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

Prova te stesso

Esempio 2: Combinazione dell'attributo direction

La posizione delle forme arrotondate iniziale della direzione del blocco e finale della direzione inline è influenzata da direction Impatto dell'attributo:

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

Prova te stesso

Esempio 3: Combinazione dell'attributo writing-mode

La posizione delle forme arrotondate iniziale della direzione del blocco e finale della direzione inline è influenzata da writing-mode Impatto dell'attributo:

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

Prova te stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
0	Valore predefinito.
length	Definisce la forma arrotondata alla parte iniziale della direzione del blocco e alla fine della direzione inline. Vedi:Unità CSS.
%	Definisce la forma arrotondata in percentuale della lunghezza dell'elemento sull'asse corrispondente.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Incorpora questa proprietà dall'elemento genitore. Vedi inherit.

Dettagli tecnici

Valore predefinito:	0
Ereditarietà:	No
Creazione dell'animazione:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderStartEndRadius="50px"