Border-style-ominaisuus

Ominaisuus border-style asettaa reunan tyylin kaikille sivuille samanaikaisesti tai erikseen kullekin sivulle. Se on lyhennysominaisuus seuraaville ominaisuuksille: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaksi

cssvalitsija {
  border-style: arvo;
}

Arvot

Arvo	Kuvaus
`solid`	Yhtenäinen viiva.
`dotted`	Reuna pisteinä.
`dashed`	Reuna viivoina.
`ridge`	Reuna kuperana viivana.
`double`	Reuna kaksoisviivana. Vaikutuksen näkemiseksi reunan paksuuden on oltava vähintään `3px`.
`groove`	Kovera reuna.
`inset`	Upotettu reuna.
`outset`	Pullistuva reuna.
`none`	Ei reunaa.

Oletusarvo: none.

Arvojen määrä

Ominaisuus voi ottaa 1, 2, 3 tai 4 arvoa, jotka annetaan välilyönnillä erotettuna:

Määrä	Kuvaus
`1`	Tyyppi kaikille sivuille samanaikaisesti.
`2`	Ensimmäinen arvo ylä- ja alareunalle, toinen - vasemmalle ja oikealle reunalle.
`3`	Ensimmäinen arvo yläreunalle, toinen - vasemmalle ja oikealle reunalle, kolmas - alareunalle.
`4`	Ensimmäinen arvo yläreunalle, toinen - oikealle reunalle, kolmas - alareunalle, neljäs - vasemmalle reunalle.

Esimerkki . Arvo solid

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

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

Результат:

Esimerkki . Arvo dotted

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

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

Результат:

Esimerkki . Arvo dashed

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

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

Результат:

Esimerkki . Arvo ridge

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

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

Результат:

Esimerkki . Arvo double

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

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

Результат:

Esimerkki . Arvo groove

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

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

Результат:

Esimerkki . Arvo inset

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

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

Результат:

Esimerkki . Arvo outset

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

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

Результат:

Esimerkki

Tässä esimerkissä on asetettu erilaiset reunan tyypit eri elementtien sivuille:

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

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

Результат:

Esimerkki

Nyt eri elementtien sivuille on asetettu myös erilainen reunan paksuus ja väri:

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

Результат:

Esimerkki

Nyt ylä- ja alareunalle on asetettu tyyppi solid, ja oikealle ja vasemmalle - dotted:

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

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

Результат:

Katso myös

ominaisuus border-color,
joka asettaa reunan värin
ominaisuus border-width,
joka asettaa reunan paksuuden
ominaisuus border,
joka on reunan lyhennysominaisuus