Style borderColor ominaisuus

Määrittely ja käyttö

borderColor Ominaisuus asettaa tai palauttaa elementin reunan värin.

Tämä ominaisuus voi käyttää yhtä tai neljää arvoa:

  • Yksi arvo, esimerkiksi: p {border-color: red} - Kaikki neljä reunaa ovat punaisia
  • Kaksi arvoa, esimerkiksi: p {border-color: red transparent} - ylä- ja alareunat ovat punaisia, sivureunat ovat läpinäkyviä
  • Kolme arvoa, esimerkiksi: p {border-color: red green blue}- ylä- ja sivureunat ovat vihreitä, alareuna on sininen
  • Neljä arvoa, esimerkiksi: p {border-color: red green blue yellow} - yläreuna on punainen, oikea reuna on vihreä, alareuna on sininen, vasen reuna on keltainen

Lisäksi:

CSS-opetus:CSS-reunat

CSS -viittausoppikirja:border-color-ominaisuus

HTML DOM -viittausoppikirja:Reunaväri

Esimerkki

Esimerkki 1

Vaihda <div>-elementin neljän reunan väriin punaiseksi:

document.getElementById("myDiv").style.borderColor = "red";

Kokeile itse

Esimerkki 2

Vaihda <div>-elementin ylä- ja alareunaväriin vihreä, ja sivureunaväriin purppura:

document.getElementById("myDiv").style.borderColor = "green purple";

Kokeile itse

Esimerkki 3

Palauttaa <div>-elementin reunavärin:

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

Kokeile itse

Syntaksi

Palauta borderColor-ominaisuus:

objekti.style.borderColor

Aseta borderColor-ominaisuus:

objekti.style.borderColor = "väri|läpinäkyvä|initial|inherit"

Ominaisuuden arvo

Arvo Kuvaus
väri

Määrittelee reunan värin. Oletusväri on musta.

Tarkista CSS-väriarvot，saadaksesi täydellisen listan mahdollisista väriarvoista.
läpinäkyvä Reunaväri on läpinäkyvä (ala-alue näkyy läpi).
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso initial.
inherit Periisi elementistä tämän ominaisuuden arvo. Katso inherit.

Tekninen yksityiskohta

Oletusarvo: musta
Palautusarvo: Merkkijono, joka ilmaisee elementin reunan värin.
CSS-versio: CSS1

Selaimen tuki

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

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