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 касиети,
чек ара үчүн кыскартылган касиет болуп саналат