Proprietatea border-style

Proprietatea border-style stabilește stilul bordurii pentru toate laturile simultan sau separat pentru fiecare latură. Este o proprietate-scurtătură pentru următoarele proprietăți: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaxă

cssselector {
  border-style: valoare;
}

Valori

Valoare	Descriere
`solid`	Linie continuă.
`dotted`	Bordură sub formă de puncte.
`dashed`	Bordură sub formă de linii întrerupte.
`ridge`	Bordură sub formă de linie reliefată.
`double`	Bordură sub formă de linie dublă. Pentru a vedea efectul, grosimea bordurii trebuie să fie minim `3px`.
`groove`	Bordură canelată.
`inset`	Bordură încastrată.
`outset`	Bordură ieșită în relief.
`none`	Absența bordurii.

Valoarea implicită: none.

Numărul de valori

Proprietatea poate primi 1, 2, 3 sau 4 valori, specificate prin spațiu:

Număr	Descriere
`1`	Tip pentru toate laturile simultan.
`2`	Prima valoare pentru partea de sus și de jos, a doua - pentru laturile stânga și dreapta.
`3`	Prima valoare pentru partea de sus, a doua - pentru laturile stânga și dreapta, a treia - pentru partea de jos.
`4`	Prima valoare pentru bordura de sus, a doua - pentru dreapta, a treia - pentru jos, a patra - pentru bordura stângă.

Exemplu . Valoarea solid

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

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

Результат:

Exemplu . Valoarea dotted

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

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

Результат:

Exemplu . Valoarea dashed

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

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

Результат:

Exemplu . Valoarea ridge

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

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

Результат:

Exemplu . Valoarea double

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

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

Результат:

Exemplu . Valoarea groove

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

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

Результат:

Exemplu . Valoarea inset

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

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

Результат:

Exemplu . Valoarea outset

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

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

Результат:

Exemplu

În acest exemplu sunt stabilite tipuri diferite de bordură pentru laturi diferite ale elementelor:

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

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

Результат:

Exemplu

Și acum pentru laturi diferite ale elementului sunt stabilite și grosimi diferite ale bordurii și culoarea acesteia:

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

Результат:

Exemplu

Acum pentru bordura de sus și de jos este stabilit tipul solid, iar pentru dreapta și stânga - dotted:

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

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

Результат:

Vezi și

proprietatea border-color,
care stabilește culoarea bordurii
proprietatea border-width,
care stabilește grosimea bordurii
proprietatea border,
care este o proprietate-scurtătură pentru bordură