CSS border-style ominaisuus

Määrittely ja käyttö

border-style-ominaisuus käytetään elementin kaikkien reunusten tyylittelyyn tai yksittäisten reunusten tyylin asettamiseen.

Reunuksen näkyminen tapahtuu vain, jos tämä arvo ei ole none.

Esimerkki 1

border-style:dotted solid double dashed;
  • Yläreunus on pisteitä
  • Oikea reunus on täysiverinen
  • Alareunus on kaksoisviiva
  • Vasen reunus on viivainen

Esimerkki 2

border-style:dotted solid double;
  • Yläreunus on pisteitä
  • Oikea reunus ja vasen reunus ovat täysiverisiä
  • Alareunus on kaksoisviiva

Esimerkki 3

border-style:dotted solid;
  • Yläreunus ja alareunus ovat pisteitä
  • Oikea reunus ja vasen reunus ovat täysiverisiä

Esimerkki 4

border-style:dotted;
  • Kaikki 4 reunaa ovat pisteitä

Katso myös:

CSS ohje:CSS reunat

HTML DOM viittausopas:borderStyle ominaisuus

Esimerkki

Aseta neljän reunan tyyli:

p
  {
  border-style:solid;
  }

Kokeile itse

CSS syntaksi

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

Ominaisuuden arvot

Arvot Kuvaus
none Määritellään reunaviivan puuttuminen.
hidden On samanarvoinen "none"-arvon kanssa. Mutta sovelletaan taulukkoihin, koska taulukoissa "hidden" käytetään ratkaisemaan reunaviivavahvistukset.
dotted Määritellään pisteviiva. Useimmissa selaimissa se näkyy täysin suorana.
dashed Määritellään tyhjaviiva. Useimmissa selaimissa se näkyy täysin suorana.
solid Määritellään täysin suora reunaviiva.
double Määritellään kaksoisviiva. Kaksoisviivan leveys on yhtä suuri kuin reunaviivan leveys.
groove Määritellään 3D kuoppavaunu reunaviiva. Sen vaikutus riippuu reunaviivan väriarvosta.
ridge Määritellään 3D rinteinen reunaviiva. Sen vaikutus riippuu reunaviivan väriarvosta.
inset Määritellään 3D sisään (inset) reunaviiva. Sen vaikutus riippuu reunaviivan väriarvosta.
outset Määritellään 3D ulospäin (outset) reunaviiva. Sen vaikutus riippuu reunaviivan väriarvosta.
inherit Määritellään, että reunaviivatyyli tulisi periä vanhemmalta elementiltä.

Kuvaus

Eniten ennustamaton reunaviivatyyli on double. Se määritellään kahden viivan leveyden ja näiden viivojen välisen tilan summana, joka on yhtä suuri kuin reunaviivan leveys. CSS-standardeissa ei kuitenkaan sanota, onko yksi viiva leveämpi kuin toinen tai olisiko näiden viivojen oltava yhtä leveitä, eikä kerrota, onko viivojen välinen tila leveämpi kuin viivat. Kaikki nämä päätökset tehdään käyttäjäagentin toimesta, ja luojalla ei ole mitään vaikutusta tähän päätökseen.

Tekninen yksityiskohta

Oletusarvo: ei määritelty
Perinnäisyys: ei
Versio: CSS1
JavaScript syntaksi: object.style.borderStyle="dotted double"

Lisää esimerkkejä

Aseta neljän reunaviivan tyyli
Tämä esimerkki näyttää, miten neljä reunaviivaa asetetaan.
Aseta jokaiselle reunalle erillinen reunaviiva
Tämä esimerkki näyttää, miten eri reunojen asettamista varten käytetään elementtiä.

Selaimen tuki

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

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