border-width Özelliği

border-width özelliği, kenarlık kalınlığını tüm taraflar için aynı anda veya her bir taraf için ayrı ayrı belirler. border-left-width, border-right-width, border-top-width, border-bottom-width özellikleri için bir kısaltma özelliğidir.

Özellik değeri olarak yüzde birimleri hariç herhangi bir boyut birimi veya thin (2 piksel kenarlık), medium (4 piksel kenarlık) veya thick (6 piksel kenarlık) anahtar kelimeleri kullanılabilir. Varsayılan değer: medium.

Sözdizimi

seçici {
	border-width: 1, 2, 3 veya 4 değer;
}

Değer Sayısı

Özellik 1, 2, 3 veya 4 adet, boşlukla ayrılmış değer alabilir:

Sayı	Açıklama
`1`	Tüm taraflar için aynı anda tip.
`2`	İlk değer üst ve alt için, ikincisi - sol ve sağ kenarlıklar için.
`3`	İlk değer üst için, ikincisi - sol ve sağ kenarlıklar için, üçüncüsü - alt için.
`4`	İlk değer üst kenarlık için, ikincisi - sağ kenarlık için, üçüncüsü - alt kenarlık için, dördüncüsü - sol kenarlık için.

Örnek

Bir piksel kalınlığında kenarlık belirleyelim:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

4 piksel kalınlığında kenarlık belirleyelim:

<div id="elem"></div>

#elem {
	border-width: 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

Üst ve alt kenarlık kalınlığını 1px, sağ ve sol kenarlık kalınlığını ise 4px olarak belirleyelim:

<div id="elem"></div>

#elem {
	border-width: 1px 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

Üst kenarlık kalınlığını 1px, sağ ve sol kenarlık kalınlığını 4px, alt kenarlık kalınlığını ise 6px olarak belirleyelim:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

Üst kenarlık kalınlığını 1px, sağ kenarlık kalınlığını 4px, alt kenarlık kalınlığını - 6px, sol kenarlık kalınlığını ise 8px olarak belirleyelim:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px 8px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

Kenarlık kalınlığını thin anahtar kelimesiyle belirleyelim:

<div id="elem"></div>

#elem {
	border-width: thin;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

Kenarlık kalınlığını medium anahtar kelimesiyle belirleyelim:

<div id="elem"></div>

#elem {
	border-width: medium;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

Kenarlık kalınlığını thick anahtar kelimesiyle belirleyelim:

<div id="elem"></div>

#elem {
	border-width: thick;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Örnek

Farklı taraflar için farklı kenarlık belirleyelim:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Ayrıca Bakınız

border-style özelliği,
kenarlığın görünümünü belirler
border-color özelliği,
kenarlığın rengini belirler
border özelliği,
kenarlık için bir kısaltma özelliğidir