Свойство border-style

Свойство border-style барча томонлар учун бир вактда ёки ҳар бир томон учун алоҳида граница услубини белгилайди. У қуйидаги свойствалар учун қисқартирилган свойствадир: border-left-style, border-right-style, border-top-style, border-bottom-style.

Синтаксис

cssселектор {
  border-style: қиймат;
}

Қийматлар

Қиймат	Тавсиф
`solid`	Узулуксиз чизиқ.
`dotted`	Нуқталар шаклидаги граница.
`dashed`	Тире шаклидаги граница.
`ridge`	Дўқий чизиқ шаклидаги граница.
`double`	Қос чизиқ шаклидаги граница. Таъсирни кўриш учун граница қалинлиги ҳеч булмаганда `3px` бўлиши керак.
`groove`	Ботқоқ граница.
`inset`	Босилган граница.
`outset`	Дўқий граница.
`none`	Границанинг йўқлиги.

Стандарт қиймат: none.

Қийматлар сони

Свойство 1, 2, 3 ёки 4 қийматларни қабул қилиши мумкин, улар бўшлиқ орқали кўрсатилади:

Сон	Тавсиф
`1`	Барча томонлар учун бир вактдаги тур.
`2`	Биринчи қиймат юқори ва қуйи учун, иккинчиси - чап ва ўнг границалар учун.
`3`	Биринчи қиймат юқори учун, иккинчиси - чап ва ўнг границалар учун, учинчиси - қуйи учун.
`4`	Биринчи қиймат юқори граница учун, иккинчиси - ўнг учун, учинчиси - қуйи учун, тўртинчиси - чап граница учун.

Мисол . solid қиймати

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

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

Результат:

Мисол . dotted қиймати

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

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

Результат:

Мисол . dashed қиймати

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

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

Результат:

Мисол . ridge қиймати

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

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

Результат:

Мисол . double қиймати

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

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

Результат:

Мисол . groove қиймати

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

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

Результат:

Мисол . inset қиймати

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

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

Результат:

Мисол . outset қиймати

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

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

Результат:

Мисол

Бу мисолда элементнинг ҳар хил томонлари учун турли хил граница турлари белгиланган:

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

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

Результат:

Мисол

Ҳозир эса элементнинг турли томонлари учун границанинг турли қалинлиги ва ранги белгиланган:

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

Результат:

Мисол

Ҳозир юқори ва қуйи граница учун solid тури белгиланган, ўнг ва чап учун эса - dotted тури белгиланган:

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

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

Результат:

Қarang

border-color свойстваси,
у граница рангини белгилайди
border-width свойстваси,
у граница қалинлигини белгилайди
border свойстваси,
у граница учун қисқартирилган свойствадир