Proprietà border-end-end-radius CSS
- Pagina precedente border-color
- Pagina successiva border-end-start-radius
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; }
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; }
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; }
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
- Pagina precedente border-color
- Pagina successiva border-end-start-radius