Xüsusiyyət border-width

border-width xüsusiyyəti butun tərəflər üçün eyni anda və ya hər bir tərəf üçün ayrı-ayrılıqda çərçivə qalınlığını təyin edir. Bu xüsusiyyət border-left-width, border-right-width, border-top-width, border-bottom-width xüsusiyyətləri üçün qısaldılmış xüsusiyyətdir.

Xüsusiyyətin dəyəri olaraq faizlər istisna olmaqla, istənilən ölçü vahidləri, ya da açar sözlər olan thin (2 piksel qalınlığında), medium (4 piksel qalınlığında) və ya thick (6 piksel qalınlığında) istifadə edilə bilər. Standart dəyər: medium.

Sintaksis

selektor {
	border-width: 1, 2, 3 ve ya 4 deyer;
}

Dəyərlərin sayı

Xüsusiyyət 1, 2, 3 və ya 4 dəyər qəbul edə bilər, bu dəyərlər boşluqla ayrılır:

Say	Təsvir
`1`	Butun tərəflər üçün eyni tip.
`2`	Birinci dəyər üst və alt, ikinci dəyər isə sol və sağ çərçivələr üçündür.
`3`	Birinci dəyər üst, ikinci dəyər sol və sağ çərçivələr, üçüncü dəyər isə alt çərçivə üçündür.
`4`	Birinci dəyər üst çərçivə, ikinci dəyər sağ çərçivə, üçüncü dəyər alt çərçivə, dördüncü dəyər isə sol çərçivə üçündür.

Nümunə

Bir piksel qalınlığında çərçivə təyin edək:

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

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

Nümunə

4 piksel qalınlığında çərçivə təyin edək:

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

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

Nümunə

Üst və alt çərçivənin qalınlığını 1px, sağ və sol çərçivənin qalınlığını isə 4px təyin edək:

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

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

Nümunə

Üst çərçivənin qalınlığını 1px, sağ və sol çərçivələrin qalınlığını 4px, alt çərçivənin qalınlığını isə 6px təyin edək:

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

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

Nümunə

Üst çərçivənin qalınlığını 1px, sağ çərçivənin qalınlığını 4px, alt çərçivənin qalınlığını 6px, sol çərçivənin qalınlığını isə 8px təyin edək:

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

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

Nümunə

Çərçivə qalınlığını thin açar sözü ilə təyin edək:

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

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

Nümunə

Çərçivə qalınlığını medium açar sözü ilə təyin edək:

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

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

Nümunə

Çərçivə qalınlığını thick açar sözü ilə təyin edək:

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

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

Nümunə

Müxtəlif tərəflər üçün müxtəlif çərçivə təyin edək:

<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;
}

Həmçinin bax

çərçivənin görünüşünü təyin edən border-style xüsusiyyəti
çərçivənin rəngini təyin edən border-color xüsusiyyəti
çərçivə üçün qısaldılmış xüsusiyyət olan border xüsusiyyəti