CSS border-stijl eigenschap

Definitie en gebruik

De border-style-eigenschap wordt gebruikt om de stijl van alle randen van een element in te stellen, of om de randstijl afzonderlijk in te stellen voor elk van de randen.

De rand kan alleen verschijnen als deze waarde niet none is.

Voorbeeld 1

border-style:dotted solid double gestippeld;
  • De bovenste rand is gepunkt.
  • De rechter rand is doorgetrokken.
  • De onderste rand is dubbel.
  • De linker rand is gestippeld.

Voorbeeld 2

border-style:dotted solid double;
  • De bovenste rand is gepunkt.
  • De rechter en linker rand zijn doorgetrokken.
  • De onderste rand is dubbel.

Voorbeeld 3

border-style:dotted solid;
  • De bovenste en onderste rand zijn gepunkt.
  • De rechter en linker rand zijn doorgetrokken.

Voorbeeld 4

border-style:dotted;
  • Alle 4 randen zijn gepunkt.

Zie ook:

CSS Handleiding:CSS rand

HTML DOM referentiehandleiding:borderStyle eigenschap

Voorbeeld

Stel de stijl van de 4 randen in:

p
  {
  border-style:solid;
  }

Probeer het zelf uit

CSS syntaxis

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Eigenschapswaarden

Waarden Beschrijving
none Definieert geen rand.
hidden Is hetzelfde als "none". Tenzij het wordt toegepast op een tabel, voor tabellen wordt "hidden" gebruikt om randconflicten op te lossen.
dotted Definieert een stippen rand. Wordt in de meeste browsers weergegeven als een rechte lijn.
dashed Definieert een gestippelde lijn. Wordt in de meeste browsers weergegeven als een rechte lijn.
solid Definieert een rechte lijn.
double Definieert een dubbele lijn. De breedte van de lijnen is gelijk aan de waarde van border-width.
groove Definieert een 3D groef rand. Het effect hangt af van de waarde van border-color.
ridge Definieert een 3D bult rand. Het effect hangt af van de waarde van border-color.
inset Definieert een 3D inset rand. Het effect hangt af van de waarde van border-color.
outset Definieert een 3D outset rand. Het effect hangt af van de waarde van border-color.
inherit Bepaalt dat de randstijl van de ouder element moet worden geërfd.

Beschrijving

De minst voorspelbare randstijl is double. Het wordt gedefinieerd als twee lijnen van de breedte plus de ruimte tussen deze lijnen gelijk is aan de waarde van border-width. De CSS-specificatie zegt echter niet of één van de lijnen breder is dan de andere of of de lijnen even breed moeten zijn, noch of de ruimte tussen de lijnen breder moet zijn dan de lijnen zelf. Allezeer wordt beslist door de gebruikersagent, en de maker heeft geen invloed op deze beslissing.

Technische details

Standaardwaarde: niet gespecificeerd
Inheritsiviteit: nee
Versie: CSS1
JavaScript syntaxis: object.style.borderStyle="dotted double"

Meer voorbeelden

Instellen van de stijl van de vier randen
Dit voorbeeld demonstreert hoe je de stijl van de vier randen instelt.
Instellen van verschillende randstijlen voor elke kant
Dit voorbeeld demonstreert hoe je verschillende randstijlen aan de kanten van een element kunt instellen.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5