Border-style xususiyati

border-style xususiyati barcha chegaralar uchun bir vaqtning o'zida yoki har bir tomonga alohida chegaralar uslubini belgilaydi. Bu quyidagi xususiyatlar uchun qisqartirilgan xususiyatdir: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksis

selector {
	border-style: qiymat;
}

Qiymatlar

Qiymat	Tavsif
`solid`	Qattiq chiziq.
`dotted`	Nuqtalar shaklidagi chegaralar.
`dashed`	Chiziqcha shaklidagi chegaralar.
`ridge`	Qavariq chiziq shaklidagi chegaralar.
`double`	Ikkilamchi chiziq shaklidagi chegaralar. Effektni ko'rish uchun chegaralar qalinligi kamida `3px` bo'lishi kerak.
`groove`	Botiq chegaralar.
`inset`	Kirgan chegaralar.
`outset`	Chiqgan chegaralar.
`none`	Chegaralar yo'qligi.

Standart qiymat: none.

Qiymatlar soni

Xususiyat 1, 2, 3 yoki 4 ta qiymatni qabul qilishi mumkin, ular probel orqali ko'rsatiladi:

Soni	Tavsif
`1`	Barcha chegaralar 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 chegaralar uchun, ikkinchisi - o'ng, uchinchisi - pastki, to'rtinchisi - chap chegaralar uchun.

Misol . Solid qiymati

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

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

Misol . Dotted qiymati

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

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

Misol . Dashed qiymati

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

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

Misol . Ridge qiymati

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

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

Misol . Double qiymati

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

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

Misol . Groove qiymati

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

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

Misol . Inset qiymati

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

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

Misol . Outset qiymati

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

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

Misol

Ushbu misolda elementlarning turli tomonlari uchun turlicha chegaralar turlari belgilangan:

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

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

Misol

Hozir esa elementning turli tomonlari uchun shuningdek, turli qalinlikdagi chegaralar va uning rangi belgilangan:

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

Misol

Hozir yuqori va pastki chegaralar uchun solid turi, o'ng va chap uchun esa - dotted belgilangan:

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

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

Shuningdek qarang

border-color xususiyati,
chegaralar rangini belgilaydi
border-width xususiyati,
chegaralar qalinligini belgilaydi
border xususiyati,
chegaralar uchun qisqartirilgan xususiyatdir