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

cssselector {
  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

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

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

Результат:

Misol . Dotted qiymati

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

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

Результат:

Misol . Dashed qiymati

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

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

Результат:

Misol . Ridge qiymati

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

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

Результат:

Misol . Double qiymati

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

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

Результат:

Misol . Groove qiymati

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

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

Результат:

Misol . Inset qiymati

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

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

Результат:

Misol . Outset qiymati

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

css#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:

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

css#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:

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

css#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:

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

css#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