Die border-style eienskap

Die eienskap border-style stel die styl van die rand vir alle kante gelyktydig of afsonderlik vir elke kant. Dit is 'n kortkode-eienskap vir die volgende eienskappe: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksis

cssselektor {
  border-style: waarde;
}

Waardes

Waarde	Beskrywing
`solid`	'n Soliede lyn.
`dotted`	Rand as stippels.
`dashed`	Rand as strepies.
`ridge`	Rand as 'n verhewe lyn.
`double`	Rand as 'n dubbel lyn. Om die effek te sien, moet die randdikte minstens `3px` wees.
`groove`	Ingesinkte rand.
`inset`	Ingedrukte rand.
`outset`	Uitstaande rand.
`none`	Geen rand nie.

Standaardwaarde: none.

Aantal waardes

Die eienskap kan 1, 2, 3 of 4 waardes aanvaar, gespesifiseer met 'n spasie:

Aantal	Beskrywing
`1`	Tipe vir alle kante gelyktydig.
`2`	Eerste waarde vir bo en onder, tweede - vir linker- en regterkant.
`3`	Eerste waarde vir bo, tweede - vir linker- en regterkant, derde - vir onder.
`4`	Eerste waarde vir die boonste rand, tweede - vir die regterkant, derde - vir die onderkant, vierde - vir die linkerkant.

Voorbeeld . Waarde solid

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

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

Результат:

Voorbeeld . Waarde dotted

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

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

Результат:

Voorbeeld . Waarde dashed

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

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

Результат:

Voorbeeld . Waarde ridge

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

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

Результат:

Voorbeeld . Waarde double

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

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

Результат:

Voorbeeld . Waarde groove

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

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

Результат:

Voorbeeld . Waarde inset

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

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

Результат:

Voorbeeld . Waarde outset

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

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

Результат:

Voorbeeld

In hierdie voorbeeld word verskillende tipes rande vir verskillende kante van die element gespesifiseer:

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

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

Результат:

Voorbeeld

En nou is verskillende randdiktes en kleure ook vir verskillende kante van die element gespesifiseer:

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

Результат:

Voorbeeld

Nou is die tipe solid gespesifiseer vir die boonste en onderste rand, en dotted vir die regter- en linkerkant:

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

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

Результат:

Sien ook

die eienskap border-color,
wat die kleur van die rand spesifiseer
die eienskap border-width,
wat die dikte van die rand spesifiseer
die eienskap border,
wat 'n kortkode-eienskap vir die rand is