Border-style касиети

border-style касиети бардык жактарга бир эле учурда же ар жакка өзүнчө чек аранын стилин берет. Бул төмөнкү касиеттер үчүн кыскартылган касиет болуп саналат: border-left-style, border-right-style, border-top-style, border-bottom-style.

Синтаксис

cssселектор {
  border-style: маани;
}

Маанилер

Маани	Сүрөттөмө
`solid`	Үзгүлтүксүз сызык.
`dotted`	Чекит сымал чек ара.
`dashed`	Сызыкча сымал чек ара.
`ridge`	Дөбөчө сымал сызык.
`double`	Кош сызык сымал чек ара. Таасири көрүү үчүн чек аранын калыңдыгы эң азы `3px` болушу керек.
`groove`	Ойдуң чек ара.
`inset`	Чөгөнгөн чек ара.
`outset`	Дөбөлүү чек ара.
`none`	Чек аранын жоктугу.

Демейки маани: none.

Маанилердин саны

Касиет 1, 2, 3 же 4 маанисин кабыл ала алат, алар боштук менен берилет:

Саны	Сүрөттөмө
`1`	Бардык жактар үчүн бир эле учурда тип.
`2`	Биринчи маани үстү жана түбү үчүн, экинчиси - сол жана оң чек аралар үчүн.
`3`	Биринчи маани үстү үчүн, экинчиси - сол жана оң чек аралар үчүн, үчүнчүсү - түбү үчүн.
`4`	Биринчи маани үстүнкү чек ара үчүн, экинчиси - оң үчүн, үчүнчүсү - төмөнкү үчүн, төртүнчүсү - сол чек ара үчүн.

Мисал . Solid мааниси

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал . Dotted мааниси

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал . Dashed мааниси

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал . Ridge мааниси

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал . Double мааниси

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал . Groove мааниси

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал . Inset мааниси

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал . Outset мааниси

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал

Бул мисалда элементтердин ар кайсы жактары үчүн ар кандай чек ара типтери берилген:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Мисал

Азыр ар кайсы жактар үчүн элементке ошондой эле ар кандай калыңдыктагы чек ара жана анын түсү берилген:

html<div id="elem"></div>

css#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 тиби берилген:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ошондой эле караңыз

border-color касиети,
чек аранын түсүн берет
border-width касиети,
чек аранын калыңдыгын берет
border касиети,
чек ара үчүн кыскартылган касиет болуп саналат