Свойство border-width

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

Свойствонинг қиймати сифатида фоизлардан ташқари ҳар қандай ўлчов бирликлари їки калит сўзлар thin (2 пикселли чекка), medium (4 пикселли чекка) ёки thick (6 пикселли чекка) хизмат қилади. Андозага кўра қиймат: medium.

Синтаксис

селектор {
	border-width: 1, 2, 3 ёки 4 қиймат;
}

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

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

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

Мисол

Битта пиксел қалинлигида чекка белгилаймиз:

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

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

Мисол

4 пиксел қалинлигида чекка белгилаймиз:

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

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

Мисол

Юқори ва қуйи чекканинг қалинлигини 1px, ўнг ва чапникини эса 4px қилиб белгилаймиз:

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

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

Мисол

Юқори чекканинг қалинлигини 1px, ўнг ва чапникини 4px, қуйиникини эса 6px қилиб белгилаймиз:

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

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

Мисол

Юқори чекканинг қалинлигини 1px, ўнгни 4px, қуйини - 6px, чапни эса 8px қилиб белгилаймиз:

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

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

Мисол

Чекканинг қалинлигини thin калит сўзи орқали белгилаймиз:

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

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

Мисол

Чекканинг қалинлигини medium калит сўзи орқали белгилаймиз:

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

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

Мисол

Чекканинг қалинлигини thick калит сўзи орқали белгилаймиз:

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

#elem {
	border-width: thick;
	border-style: solid;
	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;
}

Шунингдек қаранг

свойство border-style,
чекканинг ташқи кўринишини белгиловчи
свойство border-color,
чекканинг рангini белгиловчи
свойство border,
чекка учун қисқартирилган свойство бўлган