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 касиети