Esempio
Aggiungere un bordo arrotondato verso l'angolo in basso a sinistra di un <div> elemento:
div
{
border: 2px solid;
border-bottom-left-radius: 2em;
}
Prova tu stesso " Definizione e utilizzo
La proprietà border-bottom-left-radius definisce la forma del bordo del angolo in basso a sinistra.
Tip: Questa proprietà consente di aggiungere bordi arrotondati ad elementi!
Valore di default: | 0 |
---|---|
Inherited: | no |
animatable: | yes. Read about animatable Try it |
Versione: | CSS3 |
sintassi JavaScript: | object .style.borderBottomLeftRadius="25px" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
Proprietà | |||||
---|---|---|---|---|---|
border-bottom-left-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
CSS Sintassi
border-bottom-left-radius:length|%[length|%]|initial|inherit;
Note: I due valori di lunghezza o percentuale delle proprietà border-bottom-sinistra-raggio definire i raggi di un'ellisse trimestre che definisce la forma della curva del bordo bordo esterno. Il primo valore è il raggio orizzontale, secondo il raggio verticale. Se viene omesso il secondo valore è copiato dal primo. Se uno dei due lunghezza è pari a zero, l'angolo è quadrato, e non arrotondati. Percentuali di raggio orizzontale riferiscono alla larghezza del bordo casella, mentre percentuali per il raggio verticale riferiscono all'altezza del bordo casella.
I valori delle proprietà
Valore | Descrizione | Gioca |
---|---|---|
length | Definisce la forma del angolo in basso a sinistra. Il valore di default è 0 | Gioca " |
% | Definisce la forma del angolo in basso a sinistra in% | Gioca " |
initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Pagine correlate
CSS3 tutorial: CSS3 Borders
Di riferimento HTML DOM: borderBottomLeftRadius property