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 հատկությունը,
որը հանդիսանում է եզրագծի համար նախատեսված հապավում