Egenskaben border-style

Egenskaben border-style angiver stilen for kanter på alle sider samtidigt eller separat for hver side. Er en sammentrækningsegenskab for følgende egenskaber: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaks

cssselektor {
  border-style: værdi;
}

Værdier

Værdi	Beskrivelse
`solid`	Uafbrudt linje.
`dotted`	Kant som prikker.
`dashed`	Kant som stiplet linje.
`ridge`	Kant som en fremspringende linje.
`double`	Kant som dobbelt linje. For at se effekten skal kanttykkelsen være mindst `3px`.
`groove`	Indadgående kant.
`inset`	Indsat kant.
`outset`	Udadgående kant.
`none`	Ingen kant.

Standardværdi: none.

Antal værdier

Egenskaben kan tage 1, 2, 3 eller 4 værdier, angivet med mellemrum:

Antal	Beskrivelse
`1`	Type for alle sider samtidigt.
`2`	Første værdi for top og bund, anden - for venstre og højre kanter.
`3`	Første værdi for top, anden - for venstre og højre kanter, tredje - for nederste.
`4`	Første værdi for den øverste kant, anden - for den højre, tredje - for den nederste, fjerde - for den venstre kant.

Eksempel . Værdien solid

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel . Værdien dotted

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel . Værdien dashed

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel . Værdien ridge

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel . Værdien double

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel . Værdien groove

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel . Værdien inset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel . Værdien outset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel

I dette eksempel er der angivet forskellige kanttyper for forskellige sider af elementet:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel

Og nu er der også angivet forskellig kanttykkelse og farve for forskellige sider af elementet:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Eksempel

Nu er der for den øverste og nederste kant angivet typen solid, og for den højre og venstre - dotted:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Se også

egenskaben border-color,
som angiver kantfarven
egenskaben border-width,
som angiver kanttykkelsen
egenskaben border,
som er en sammentrækningsegenskab for kanten