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

Տես նաև

border-color հատկությունը,
որը սահմանում է եզրագծի գույնը
border-width հատկությունը,
որը սահմանում է եզրագծի հաստությունը
border հատկությունը,
որը հանդիսանում է եզրագծի համար հապավում