Border-width xususiyati

border-width xususiyati barcha tomondagi chegaraning qalinligini bir vaqtning o'zida yoki har bir tomoni alohida belgilaydi. Bu xususiyat border-left-width, border-right-width, border-top-width, border-bottom-width xususiyatlari uchun qisqartma hisoblanadi.

Xususiyat qiymati sifatida foizlardan tashqari har qanday o'lchov birliklari, yoki thin (2 pikseldagi chegara), medium (4 pikseldagi chegara) yoki thick (6 pikseldagi chegara) kalit so'zlari qabul qilinadi. Standart qiymat: medium.

Sintaksis

selector {
	border-width: 1, 2, 3 yoki 4 qiymat;
}

Qiymatlar soni

Xususiyat 1, 2, 3 yoki 4 ta probel bilan ajratilgan qiymatlarni qabul qilishi mumkin:

Soni	Tavsif
`1`	Barcha tomonlar uchun bir vaqtning o'zida tur.
`2`	Birinchi qiymat yuqori va pastki uchun, ikkinchisi - chap va o'ng chegaralar uchun.
`3`	Birinchi qiymat yuqori uchun, ikkinchisi - chap va o'ng chegaralar uchun, uchinchisi - pastki uchun.
`4`	Birinchi qiymat yuqori chegara uchun, ikkinchisi - o'ng, uchinchisi - pastki, to'rtinchisi - chap chegara uchun.

Misol

Bir piksel qalinlikdagi chegara belgilaymiz:

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

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

Misol

4 piksel qalinlikdagi chegara belgilaymiz:

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

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

Misol

Yuqori va pastki chegaraning qalinligini 1px, o'ng va chapni esa - 4px da belgilaymiz:

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

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

Misol

Yuqori chegaraning qalinligini 1px da, o'ng va chapni - 4px da, pastkini esa 6px da belgilaymiz:

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

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

Misol

Yuqori chegaraning qalinligini 1px da, o'ngni 4px da, pastkini - 6px da, chapni esa 8px da belgilaymiz:

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

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

Misol

Chegaraning qalinligini thin kalit so'zi bilan belgilaymiz:

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

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

Misol

Chegaraning qalinligini medium kalit so'zi bilan belgilaymiz:

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

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

Misol

Chegaraning qalinligini thick kalit so'zi bilan belgilaymiz:

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

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

Misol

Har xil tomonlar uchun har xil chegara belgilaymiz:

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

Shuningdek qarang

border-style xususiyati,
bu chegara ko'rinishini belgilaydi
border-color xususiyati,
bu chegara rangini belgilaydi
border xususiyati,
bu chegara uchun qisqartma xususiyat hisoblanadi