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