Atribuut border-width

Atribuut border-width määrab piiri paksuse kõikidele külgedele korraga või eraldi iga külje jaoks. See on lühendatud atribuut atribuutidele border-left-width, border-right-width, border-top-width, border-bottom-width.

Atribuudi väärtusteks on mis tahes mõõtühikud, välja arvatud protsendid, või võtmesõnad thin (piir 2 pikslit), medium (piir 4 pikslit) või thick (piir 6 pikslit). Vaikeväärtus: medium.

Süntaks

cssselektor {
  border-width: 1, 2, 3 või 4 väärtust;
}

Väärtuste arv

Atribuut võib võtta 1, 2, 3 või 4 väärtust, mis on eraldatud tühikutega:

Näide

Määrame ühe pikslise paksusega piiri:

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

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

Результат:

Näide

Määrame 4 pikslise paksusega piiri:

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

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

Результат:

Näide

Määrame ülemise ja alumise piiri paksuseks 1px, ning parema ja vasaku paksuseks 4px:

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

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

Результат:

Näide

Määrame ülemise piiri paksuseks 1px, parema ja vasaku paksuseks 4px, ning alumiseks 6px:

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

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

Результат:

Näide

Määrame ülemise piiri paksuseks 1px, parema paksuseks 4px, alumise - 6px, ning vasaku paksuseks 8px:

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

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

Результат:

Näide

Määrame piiri paksuse võtmesõnaga thin:

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

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

Результат:

Näide

Määrame piiri paksuse võtmesõnaga medium:

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

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

Результат:

Näide

Määrame piiri paksuse võtmesõnaga thick:

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

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

Результат:

Näide

Määrame erineva piiri erinevatele külgedele:

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

Результат:

Vaata ka