Savybė border-style

Savybė border-style nustato sienelės stilį visoms pusėms vienu metu arba atskirai kiekvienai pusei. Yra sutrumpinta savybė šioms savybėms: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksė

cssselektorius {
  border-style: reikšmė;
}

Reikšmės

Reikšmė	Aprašas
`solid`	Vientisa linija.
`dotted`	Sienelė taškų pavidalu.
`dashed`	Sienelė brūkšnių pavidalu.
`ridge`	Sienelė išgaubtos linijos pavidalu.
`double`	Sienelė dvigubos linijos pavidalu. Kad pamatytumėte efektą, sienelės storis turi būti mažiausiai `3px`.
`groove`	Įgaubta sienelė.
`inset`	Įspausta sienelė.
`outset`	Išgaubta sienelė.
`none`	Sienelės nebuvimas.

Numatytoji reikšmė: none.

Reikšmių kiekis

Savybė gali priimti 1, 2, 3 arba 4 reikšmes, nurodomas per tarpą:

Kiekis	Aprašas
`1`	Tipas visoms pusėms vienu metu.
`2`	Pirmoji reikšmė viršui ir apačiai, antroji - kairiai ir dešiniai sienelėms.
`3`	Pirmoji reikšmė viršui, antroji - kairiai ir dešiniai sienelėms, trečioji - apačiai.
`4`	Pirmoji reikšmė viršutinei sienelei, antroji - dešiniai, trečioji - apatinei, ketvirtoji - kairiajai sienelei.

Pavyzdys . Reikšmė solid

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

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

Результат:

Pavyzdys . Reikšmė dotted

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

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

Результат:

Pavyzdys . Reikšmė dashed

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

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

Результат:

Pavyzdys . Reikšmė ridge

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

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

Результат:

Pavyzdys . Reikšmė double

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

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

Результат:

Pavyzdys . Reikšmė groove

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

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

Результат:

Pavyzdys . Reikšmė inset

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

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

Результат:

Pavyzdys . Reikšmė outset

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

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

Результат:

Pavyzdys

Šiame pavyzdyje nustatyti skirtingi sienelės tipai skirtingoms elemento pusėms:

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

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

Результат:

Pavyzdys

O dabar skirtingoms elemento pusėms taip pat nustatytas skirtingas sienelės storis ir jos spalva:

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

Результат:

Pavyzdys

Dabar viršutinei ir apatinei sienelei nustatytas tipas solid, o dešiniai ir kairiai - dotted:

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

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

Результат:

Taip pat žiūrėkite

savybė border-color,
kuri nustato sienelės spalvą
savybė border-width,
kuri nustato sienelės storį
savybė border,
kuri yra sutrumpinta sienelės savybė