CSS border-width ominaisuus

Määrittely ja käyttö

border-width lyhennetty ominaisuus asettaa elementin kaikkien reunien leveyden tai asettaa jokaiselle reunalle erillisen leveyden.

Toimii vain, jos reunan tyyli ei ole none. Jos reunan tyyli on none, reunan leveys asetetaan todellisuudessa 0:een. Ei sallita miinusarvojen määrittämistä pituudelle.

Esimerkki 1

border-width:thin medium thick 10px;
  • Yläreuna on ohu
  • Oikea reuna on keskipaksu
  • Alareuna on paksu
  • Vasen reuna on 10px leveä reuna

Esimerkki 2

border-width:thin medium thick;
  • Yläreuna on 10px leveä
  • Oikea ja vasen reuna ovat keskipaksuja
  • Alareuna on paksu

Esimerkki 3

border-width:thin medium;
  • Ylä- ja alareuna ovat ohuita
  • Oikea ja vasen reuna ovat keskipaksuja

Esimerkki 4

border-width:thin;
  • Kaikki 4 reunaa ovat ohuita

Esimerkki

Aseta neljän reunan leveys:

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

Kokeile itse

CSS kieli

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

Ominaisuuden arvo

Arvo Kuvaus
thin Määrittelee ohuen reunan.
medium Oletus. Määrittelee keskipaksun reunan.
thick Määrittelee paksun reunan.
length Mahdollistaa reunan leveyden mukauttamisen.
inherit Määritellään, että reunan leveys tulisi periä vanhemmalta elementiltä.

Lisää esimerkkejä

Kaikki reunan leveyys ominaisuudet yhdessä lausekkeessa
Tämä esimerkki näyttää, kuinka kaikki reunan leveyys ominaisuudet asetetaan yhdessä lausekkeessa.

Tekninen yksityiskohta

Oletusarvo: medium
Perintä: ei
Versio: CSS1
JavaScript kieli: object.style.borderWidth="thin thick"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

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

Katso myös:

CSS oppitunti:CSS reunat

HTML DOM viittausopas:borderWidth ominaisuus