Egenskapen border-style

Egenskapen border-style sätter stilen för kantlinjen på alla sidor samtidigt eller separat för varje sida. Är en genvägsegenskap för följande egenskaper: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntax

cssselektor {
  border-style: värde;
}

Värden

Värde	Beskrivning
`solid`	Heldragen linje.
`dotted`	Kantlinje som punkter.
`dashed`	Kantlinje som streck.
`ridge`	Kantlinje som en utskjutande linje.
`double`	Kantlinje som en dubbel linje. För att se effekten måste kantlinjens tjocklek vara minst `3px`.
`groove`	Urgröpt kantlinje.
`inset`	Nedtryckt kantlinje.
`outset`	Utskjutande kantlinje.
`none`	Ingen kantlinje.

Standardvärde: none.

Antal värden

Egenskapen kan ta 1, 2, 3 eller 4 värden, angivna mellan mellanslag:

Antal	Beskrivning
`1`	Typ för alla sidor samtidigt.
`2`	Första värdet för toppen och botten, andra - för vänster och höger kantlinjer.
`3`	Första värdet för toppen, andra - för vänster och höger kantlinjer, tredje - för botten.
`4`	Första värdet för den övre kantlinjen, andra - för den högra, tredje - för den nedre, fjärde - för den vänstra kantlinjen.

Exempel . Värdet solid

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

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

Результат:

Exempel . Värdet dotted

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

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

Результат:

Exempel . Värdet dashed

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

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

Результат:

Exempel . Värdet ridge

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

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

Результат:

Exempel . Värdet double

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

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

Результат:

Exempel . Värdet groove

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

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

Результат:

Exempel . Värdet inset

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

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

Результат:

Exempel . Värdet outset

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

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

Результат:

Exempel

I detta exempel är olika typer av kantlinjer satta för olika sidor 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;
}

Результат:

Exempel

Och nu för olika sidor av elementet är även olika kantlinjetjocklekar och dess färg satta:

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;
}

Результат:

Exempel

Nu för den övre och nedre kantlinjen är typen solid satt, och för den högra och vänstra - dotted:

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

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

Результат:

Se även

egenskapen border-color,
som sätter färgen på kantlinjen
egenskapen border-width,
som sätter tjockleken på kantlinjen
egenskapen border,
som är en genvägsegenskap för kantlinjen