Style borderStyle ominaisuus

Määrittely ja käyttö

borderStyle Ominaisuus asettaa tai palauttaa elementin reunan tyylin.

Tämä ominaisuus voi käyttää yhdestä neljään arvoa:

  • Yksi arvo, esimerkiksi: p {border-style: solid} - kaikki neljä reunaa ovat kiinteitä
  • Kaksi arvoa, esimerkiksi: p {border-style: solid dotted} - ylä- ja alapuolinen reuna on kiinteä, sivureunat ovat viivaisia
  • Kolme arvoa, esimerkiksi: p {border-style: solid dotted double} - ylä- ja alapuolinen reuna on kiinteä, sivureunat ovat pisteitä, alareuna on kaksoisreuna
  • Neljä arvoa, esimerkiksi: p {border-style: solid dotted double dashed} - yläreuna on kiinteä, oikea reuna on viivainen, alareuna on kaksoisreuna, vasen reuna on viivainen

Katso myös:

CSS -opas:CSS-reunat

CSS -viittauskirja:border-style -ominaisuus

HTML DOM -viittauskirja:border-ominaisuus

Esimerkki

Esimerkki 1

Lisää <div>-elementille täysi reunaviiva:

document.getElementById("myDiv").style.borderStyle = "solid";

Kokeile itse

Esimerkki 2

Muuta <div>-elementin neljän reunan tyylejä:

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Kokeile itse

Esimerkki 3

Palauttaa <div>-elementin reunaviivan tyylin:

alert(document.getElementById("myDiv").style.borderStyle);

Kokeile itse

Esimerkki 4

Kaikkien eri arvojen esittely:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

Kokeile itse

Syntaksi

Palauta borderStyle-ominaisuus:

object.style.borderStyle

Aseta borderStyle-ominaisuus:

object.style.borderStyle = value
Arvo Kuvaus
none Määritä reunaviiva puuttuu. Oletus.
hidden Sama kuin "none", mutta ei poikkeusta taulukkomuotoilun elementtien reunaviivojen konfliktin ratkaisussa.
dotted Määritä piste reunaviiva.
dashed Määritä viivamerkki reunaviiva.
solid Määritä täysi reunaviiva.
double Määritä kaksi reunaa. Molempien reunaviivojen leveys on sama kuin border-width-arvon.
groove Määritä 3D syväkuoppa reunaviiva. Vaikutus riippuu border-color arvon.
ridge Määritä 3D ryijyjärjestelmä reunaviivan. Vaikutus riippuu border-color arvon.
inset Määritä 3D sisään oleva reunaviiva. Vaikutus riippuu border-color arvon.
outset Määritä 3D ulospäin oleva reunaviiva. Vaikutus riippuu border-color-arvon arvosta.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltä. Katso inherit.

Tekninen yksityiskohta

Oletusarvo: Ei mitään
Palautusarvo: Merkkijono, joka ilmaisee elementin reunaviivan tyylin.
CSS versio: CSS1

Selain tukee

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki