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 қасиеті,
шекараның түрін белгілейді
border қасиеті,
шекара үшін қысқартылған қасиет болып табылады