Style borderStyle egenskap

Definition och användning

borderStyle Egenskapen ställer in eller returnerar elementets kantstil.

Denna egenskap kan använda ett till fyra värden:

  • Ett värde, till exempel: p {border-style: solid} - Alla fyra kanterna är solid linje
  • Två värden, till exempel: p {border-style: solid dotted} - Övre och nedre kanter är solid linje, vänstra och högra kanter är punktlinjer
  • Tre värden, till exempel: p {border-style: solid dotted double} - Övre kant är en solid linje, vänstra och högra kanter är punktlinjer, nedre kant är en dubbel linje
  • Fyra värden, till exempel: p {border-style: solid dotted double dashed} - Övre kant är en solid linje, högra kant är en punktlinje, nedre kant är en dubbel linje, vänstra kant är en punktlinje

Se också:

CSS kurs:CSS-kant

CSS referenshandbok:border-style egenskap

HTML DOM referenshandbok:border egenskap

Exempel

Exempel 1

Lägg till en solid kant till <div>-elementet:

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

Prova själv

Exempel 2

Ändra stilen för de fyra kanterna på <div>-elementet:

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

Prova själv

Exempel 3

Returnerar kantstilen för <div>-elementet:

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

Prova själv

Exempel 4

Demonstration av alla olika värden:

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

Prova själv

Syntax

Returnera borderStyle egenskapen:

object.style.borderStyle

Sätt borderStyle egenskapen:

object.style.borderStyle = value
Värde Beskrivning
none Definiera en kantlös kant. Standard.
hidden Liksom "none", men undantaget vid lösning av kantkonflikter för tabell元素.
dotted Definiera en punkt kant.
dashed Definiera en punktlinje kant.
solid Definiera en solid kant.
double Definiera två kanter. Bredden på båda kanterna är densamma som värdet av border-width.
groove Definiera 3D fäll kant. Effekten beror på border-color värdet.
ridge Definiera 3D rygg kant. Effekten beror på border-color värdet.
inset Definiera 3D insatt kant. Effekten beror på border-color värdet.
outset Definiera 3D utstående kant. Effekten beror på värdet av border-color.
initial Sätt denna egenskap till dess standardvärde. Se initial.
inherit Inheriterar denna egenskap från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: Ingen
Returvärde: En sträng som anger elementets kantstilar.
CSS-version: CSS1

Webbläsare stödjer

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd