CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

Proprietà border-right CSS Proprietà border-left-width CSS

CSS3 border-radius 属性使用方法及示例

border-radius属性设置元素的边角为圆角形状。它是border-top-left-radius,border-top-right-radius,border-bottom-right-radius和border-bottom-left-radius属性的简写。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：	0
适用于：	所有元素
继承：	没有
可动画制作：	是。请参考动画属性.
版本：	CSS3的新功能
JavaScript语法：	object object.style.borderRadius="8px"

Attenzione:border-radius即使未定义边框或将其值设置为none，该属性也会使元素的背景变圆。

border-radius的使用语法

该属性的语法如下：

border-radius: [length | percentage] 1 to 4 values　
　\-------------------------------/
　　　　　　　　　　　　First radii
/ [length | percentage] 1 to 4 values | initial | inherit
　　　\------------------------------/
　　　　　　　　Second radii (optional)

该速记符号可以采用一个，两个，三个或四个空格分隔的值。

如果指定一个值，则它定义所有角的半径。
Se specificatiDue valoriAllora il primo valore viene utilizzato per l'angolo superiore sinistro e inferiore destro, e il secondo valore per l'angolo superiore destro e inferiore sinistro.
Se specificatiTre valoriAllora il primo valore viene utilizzato per l'angolo superiore sinistro, il secondo valore per l'angolo superiore destro e inferiore sinistro, e il terzo valore per l'angolo inferiore destro.
Se specificatiQuattro valoriSe specificati, i valori saranno applicati in sequenza all'angolo superiore sinistro, superiore destro, inferiore destro e inferiore sinistro del bordo.

Gli esempi seguenti illustrano come utilizzare la proprietà border-radius.

Esempio

　　div {
　　　border: 2px solid #f08080;
　　　border-radius: 20px;
　　}

Prova a vedere <>/

Attenzione:Il secondo valore di lunghezza opzionale (inizializzato con "/") definisce il raggio verticale dell'angolo, quindi la forma dell'angolo è un quarto di ellisse. Se il secondo valore viene omesso o è uguale al secondo valore, la forma dell'angolo è un quarto di cerchio. Se uno dei valori è zero, l'angolo è quadrato, non arrotondato.

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
length	In valori di lunghezza come px, pt, cm, em ecc., non è permesso l'uso di valori negativi.
percentage	La dimensione del raggio, espressa in percentuale. Se è un angolo ellittico, il percentuale del raggio orizzontale è calcolato rispetto alla larghezza della scatola dell'elemento, mentre il percentuale del raggio verticale è calcolato rispetto alla altezza della scatola dell'elemento. Non è permesso l'uso di valori negativi.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore della proprietà border-radius dell'elemento padre.

Compatibilità del browser

Compatibilità dei browser per la proprietà border-radius, i numeri nella tabella rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

	Firefox 4+ Google Chrome 4+ Internet Explorer 9+ Apple Safari 5+ Opera 10.5+

Attenzione: Internet Explorer 8 e versioni precedenti non supportano questa proprietà border-radius. È supportata in IE9 e versioni successive.

Leggi di più

Vedi la guida:CSS Border,CSS3 Border.

Proprietà correlate:border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius,border-top-right-radius

Proprietà border-right CSS Proprietà border-left-width CSS