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