Proprietà border-end-end-radius CSS

Definizione e uso

border-end-end-radius L'attributo viene utilizzato per definire il raggio arrotondato tra la fine del blocco dell'elemento (block-end) e la fine della direzione in linea (inline-end).

Attenzione:Proprietà CSS correlate writing-mode,text-orientation e direction Definisce la direzione del blocco e la direzione in linea. Ecco perché questi attributi influenzano anche border-end-end-radius Il risultato dell'attributo. Per le pagine in inglese, la direzione in linea è da sinistra a destra, la direzione del blocco è verso il basso.

Se border-end-end-radius Se l'attributo ha due valori, allora il bordo arrotondato sarà ellittico:

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

Se border-end-end-radius L'attributo ha un valore, allora il bordo arrotondato sarà circolare:

border-end-end-radius: 50px;

CSS border-end-end-radius i quali attributi sono simili a border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius e border-top-right-radius è molto simile, ma border-end-end-radius L'attributo dipende dalla direzione del blocco e della direzione in linea.

Esempio

Esempio 1

Aggiungi arrotondamenti alla fine della direzione del blocco e della direzione in linea per alcuni elementi:

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

Prova personalmente

Esempio 2: Combinazione dell'attributo direction

La posizione dell'angolo arrotondato alla fine della direzione del blocco e della direzione in linea è influenzata da direction Impatto dell'attributo:

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

Prova personalmente

Esempio 3: Combinazione dell'attributo writing-mode

La posizione dell'angolo arrotondato alla fine 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-end-end-radius: 25px;
}

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
0 Valore predefinito.
length Definisce la forma arrotondata alla fine della direzione del blocco e della direzione in linea.
% Definisce la forma arrotondata del cerchio in percentuale della lunghezza dell'elemento sull'asse corrispondente.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: 0
Ereditarietà: No
Produzione dell'animazione: Supportato. Si prega di consultare:Proprietà correlate con l'animazione.
Versione: CSS3
Sintassi JavaScript: object.style.borderEndEndRadius="50px"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo per la prima volta.

Chrome Edge Firefox Safari Opera
89.0 89.0 66.0 15.0 75.0

Pagina relativa

Tutorial:Arrotondamento angolare CSS

Riferimento:Proprietà border-bottom-left-radius CSS

Riferimento:Proprietà border-bottom-right-radius CSS

Riferimento:Proprietà CSS border-top-left-radius

Riferimento:Proprietà CSS border-top-right-radius

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS text-orientation

Riferimento:Proprietà CSS writing-mode