Border-style häsiýeti

border-style häsiýeti ähli tarap üçin bilelikde ýa-da her bir tarap üçin aýratyn serhet stilini kesgitleýär. Aşakdaky häsiýetler üçin gysgaldylan häsiýet bolup hyzmat edýär: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksis

cssselektor {
  border-style: baha;
}

Bahalar

Baha	Düşündiriş
`solid`	Gaty çyzyk.
`dotted`	Nokatlar görnüşindäki serhet.
`dashed`	Tire görnüşindäki serhet.
`ridge`	Çykan çyzyk görnüşindäki serhet.
`double`	Goşa çyzyk görnüşindäki serhet. Täsiri görmek üçin serhetiň galyňlygy iň az `3px` bolmaly.
`groove`	Oýulgan serhet.
`inset`	Çökdirilen serhet.
`outset`	Çykan serhet.
`none`	Serhetiň ýoklugy.

Bellenen bahasy: none.

Bahalaryň sany

Häsiýet 1, 2, 3 ýa-da 4 sany bahany kabul edip bilýär, olar bosluk bilen görkezilýär:

Sany	Düşündiriş
`1`	Ähli tarap üçin bilelikde tip.
`2`	Birnji baha ýokarky we aşaky üçin, ikinjisi - çep we sag serhetler üçin.
`3`	Birnji baha ýokarky üçin, ikinjisi - çep we sag serhetler üçin, üçünjisi - aşaky üçin.
`4`	Birnji baha ýokarky serhet üçin, ikinjisi - sag, üçünjisi - aşaky, dördünjisi - çep serhet üçin.

Mysal . Solid bahasy

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

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

Результат:

Mysal . Dotted bahasy

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

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

Результат:

Mysal . Dashed bahasy

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

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

Результат:

Mysal . Ridge bahasy

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

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

Результат:

Mysal . Double bahasy

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

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

Результат:

Mysal . Groove bahasy

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

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

Результат:

Mysal . Inset bahasy

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

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

Результат:

Mysal . Outset bahasy

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

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

Результат:

Mysal

Bu mysalda elementleriň dürli tarapary üçin dürli serhet görnüşleri kesgitlenen:

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

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

Результат:

Mysal

Indi bolsa elementleriň dürli tarapary üçin şeýle-de dürli serhet galyňlygy we onuň reňki kesgitlenen:

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

Результат:

Mysal

Indi ýokarky we aşaky serhet üçin solid tipi kesgitlenen, sag we çep üçin bolsa - dotted:

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

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

Результат:

Şeýle-de görmeli

border-color häsiýeti,
serhetiň reňkini kesgitleýär
border-width häsiýeti,
serhetiň galyňlygyny kesgitleýär
border häsiýeti,
serhet üçin gysgaldylan häsiýet bolup hyzmat edýär