Egenskapen border-style

Egenskapen border-style setter stilen på kanten for alle sider samtidig eller separat for hver side. Er en sammensatt egenskap for følgende egenskaper: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaks

cssvelger {
  border-style: verdi;
}

Verdier

Verdi	Beskrivelse
`solid`	Heltrukket linje.
`dotted`	Kant som prikker.
`dashed`	Kant som streker.
`ridge`	Kant som en utstående linje.
`double`	Kant som en dobbel linje. For å se effekten må kanttykkelsen være minst `3px`.
`groove`	Innskåret kant.
`inset`	Innpresset kant.
`outset`	Utstående kant.
`none`	Ingen kant.

Standardverdi: none.

Antall verdier

Egenskapen kan ta 1, 2, 3 eller 4 verdier, angitt mellom mellomrom:

Antall	Beskrivelse
`1`	Type for alle sider samtidig.
`2`	Første verdi for topp og bunn, andre - for venstre og høyre kant.
`3`	Første verdi for topp, andre - for venstre og høyre kant, tredje - for bunn.
`4`	Første verdi for toppkant, andre - for høyre kant, tredje - for bunnkant, fjerde - for venstre kant.

Eksempel . Verdien solid

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

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

Результат:

Eksempel . Verdien dotted

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

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

Результат:

Eksempel . Verdien dashed

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

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

Результат:

Eksempel . Verdien ridge

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

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

Результат:

Eksempel . Verdien double

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

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

Результат:

Eksempel . Verdien groove

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

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

Результат:

Eksempel . Verdien inset

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

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

Результат:

Eksempel . Verdien outset

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

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

Результат:

Eksempel

I dette eksemplet er det satt ulike kanttyper for ulike sider av 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 nå for ulike sider av elementet er det også satt ulik kanttykkelse og farge:

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

Nå for topp- og bunnkant er det satt typen solid, og for høyre 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å

egenskapen border-color,
som setter fargen på kanten
egenskapen border-width,
som setter tykkelsen på kanten
egenskapen border,
som er en sammensatt egenskap for kanten