A border-style tulajdonság

A border-style tulajdonság egyszerre minden oldalra, vagy külön-külön mindegyik oldalra állítja be a szegély stílusát. Rövidítő tulajdonság a következő tulajdonságokhoz: border-left-style, border-right-style, border-top-style, border-bottom-style.

Szintaxis

cssszelektor {
  border-style: érték;
}

Értékek

Érték	Leírás
`solid`	Folyamatos vonal.
`dotted`	Pontokból álló szegély.
`dashed`	Szaggatott vonalból álló szegély.
`ridge`	Kidomborodó vonalú szegély.
`double`	Dupla vonalból álló szegély. Ahhoz, hogy a hatás látható legyen, a szegély vastagságának legalább `3px`-nek kell lennie.
`groove`	Bemélyedő szegély.
`inset`	Behúzott szegély.
`outset`	Kidobott szegély.
`none`	Szegély hiánya.

Alapértelmezett érték: none.

Értékek száma

A tulajdonság 1, 2, 3 vagy 4 értéket vehet fel, szóközzel elválasztva:

Darabszám	Leírás
`1`	Típus egyszerre minden oldalra.
`2`	Első érték a felső és az alsó oldalra, második - a bal és jobb oldali szegélyre.
`3`	Első érték a felső oldalra, második - a bal és jobb oldali szegélyre, harmadik - az alsóra.
`4`	Első érték a felső szegélyre, második - a jobb oldalira, harmadik - az alsóra, negyedik - a bal oldali szegélyre.

Példa . Solid érték

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

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

Результат:

Példa . Dotted érték

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

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

Результат:

Példa . Dashed érték

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

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

Результат:

Példa . Ridge érték

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

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

Результат:

Példa . Double érték

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

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

Результат:

Példa . Groove érték

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

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

Результат:

Példa . Inset érték

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

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

Результат:

Példa . Outset érték

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

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

Результат:

Példa

Ebben a példában különböző típusú szegélyek vannak megadva az elem különböző oldalaira:

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

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

Результат:

Példa

Most pedig az elem különböző oldalaira különböző vastagságú szegély és szín van megadva:

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

Результат:

Példa

Most a felső és alsó szegélyre a solid típus, a jobb és bal oldalira pedig dotted típus van megadva:

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

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

Результат:

Lásd még

a border-color tulajdonság,
amely a szegély színét állítja be
a border-width tulajdonság,
amely a szegély vastagságát állítja be
a border tulajdonság,
amely a szegélyre vonatkozó rövidítő tulajdonság