Свойство border-style

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

Синтаксис

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

Қийматлар

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мисол

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

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

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

Мисол

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

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

Мисол

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

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

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

Қarang

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