Proprietà CSS border-top-right-radius
Esempio
Aggiungi bordi arrotondati nell'angolo in alto a destra di due elementi <div>:
#example1 {
border: 2px solid red;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-right-radius: 50px
20px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La border-top-right-radius
proprietà definisce il raggio dell'angolo in alto a destra.
Suggerimento: questa proprietà ti consente di aggiungere bordi arrotondati agli elementi!
Valore di default: | 0 |
---|---|
Ereditato: | no |
Animabile: | sì. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.borderTopRightRadius="25px" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- o -moz- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
border-top-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintassi CSS
border-top-right-radius: length|% [length|%]|initial|inherit;
Nota: se imposti due valori, il primo è per il bordo superiore e il secondo per il bordo destro. Se il secondo valore viene omesso, viene copiato dal primo. Se una delle due lunghezze è zero, l'angolo è quadrato, non arrotondato.
Valori di proprietà
Value | Description | Play it |
---|---|---|
length | Defines the shape of the top-right corner. Read about length units | |
% | Defines the shape of the top-right corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Aggiungi i bordi arrotondati nell'angolo in alto a destra in percentuale:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-right-radius: 40%;
}
Pagine correlate
Tutorial CSS: CSS Angoli Arrotondati
Riferimento DOM HTML: proprietà borderTopRightRadius