Eigenschap border-style

De eigenschap border-style bepaalt de stijl van de rand voor alle zijden tegelijk of afzonderlijk voor elke zijde. Het is een verkorte eigenschap voor de volgende eigenschappen: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaxis

cssselector {
  border-style: waarde;
}

Waarden

Waarde	Beschrijving
`solid`	Doorgetrokken lijn.
`dotted`	Rand als stippellijn.
`dashed`	Rand als streepjeslijn.
`ridge`	Rand als verhoogde lijn.
`double`	Rand als dubbele lijn. Om het effect te zien moet de randdikte minimaal `3px` zijn.
`groove`	Ingedaalde rand.
`inset`	Ingezette rand.
`outset`	Uitstekende rand.
`none`	Geen rand.

Standaardwaarde: none.

Aantal waarden

De eigenschap kan 1, 2, 3 of 4 waarden aannemen, gescheiden door een spatie:

Aantal	Beschrijving
`1`	Type voor alle zijden tegelijk.
`2`	Eerste waarde voor boven en onder, tweede - voor linker en rechter rand.
`3`	Eerste waarde voor boven, tweede - voor linker en rechter rand, derde - voor onderkant.
`4`	Eerste waarde voor bovenrand, tweede - voor rechterrand, derde - voor onderrand, vierde - voor linkerrand.

Voorbeeld . Waarde solid

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

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

Результат:

Voorbeeld . Waarde dotted

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

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

Результат:

Voorbeeld . Waarde dashed

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

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

Результат:

Voorbeeld . Waarde ridge

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

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

Результат:

Voorbeeld . Waarde double

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

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

Результат:

Voorbeeld . Waarde groove

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

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

Результат:

Voorbeeld . Waarde inset

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

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

Результат:

Voorbeeld . Waarde outset

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

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

Результат:

Voorbeeld

In dit voorbeeld zijn verschillende randtypes ingesteld voor verschillende zijden van het element:

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

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

Результат:

Voorbeeld

En nu zijn voor verschillende zijden van het element ook verschillende randdiktes en kleuren ingesteld:

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

Результат:

Voorbeeld

Nu is voor de boven- en onderrand het type solid ingesteld, en voor de rechter- en linkerrand - dotted:

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

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

Результат:

Zie ook

eigenschap border-color,
die de kleur van de rand bepaalt
eigenschap border-width,
die de dikte van de rand bepaalt
eigenschap border,
die de verkorte eigenschap voor de rand is