CSS border-breedte eigenschap

Definitie en gebruik

De korte eigenschap border-width stelt de breedte in van alle randen van het element, of apart voor elke rand.

Het werkt alleen als het randstijl niet none is. Als de randstijl none is, wordt de randbreedte eigenlijk op 0 hersteld. Negatieve lengtewaarden zijn niet toegestaan.

Voorbeeld 1

border-width:thin medium thick 10px;
  • De bovenste rand is een dunne rand
  • De rechter rand is een gemiddelde rand
  • De onderste rand is een dikke rand
  • De linker rand is een rand van 10px breed

Voorbeeld 2

border-width:thin medium thick;
  • De bovenste rand is 10px breed
  • De rechter en linker rand zijn gemiddelde randen
  • De onderste rand is een dikke rand

Voorbeeld 3

border-width:thin medium;
  • De bovenste en onderste rand zijn dunne randen
  • De rechter en linker rand zijn gemiddelde randen

Voorbeeld 4

border-width:thin;
  • Alle 4 randen zijn dunne randen

Voorbeeld

Stel de breedte van de vier randen in:

p
  {
  border-style:solid;
  border-width:15px;
  }

Probeer het zelf

CSS syntaxis

border-width: medium|thin|thick|length|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
Definieer een dunne rand. thin
medium Standaard. Definieer een gemiddelde rand.
thick Definieer een dikke rand.
length Laat u toe om de breedte van de rand zelf te personaliseren.
inherit Bepaal dat de randbreedte van de ouder-element moet worden geërfd.

Meer voorbeelden

Alle randbreedte-eigenschappen in één verklaring
Dit voorbeeld demonstreert het gebruik van de afkortingseigenschap om alle randbreedte-eigenschappen in dezelfde verklaring in te stellen.

Technische details

Standaardwaarde: medium
Inherits: nee
Versie: CSS1
JavaScript syntaxis: object.style.borderWidth="thin thick"

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

Zie ook:

CSS Handleiding:CSS rand

HTML DOM Referentie Handboek:borderWidth eigenschap