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

selektor {
	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:

Arv	Kirjeldus
`1`	Tüüp kõikidele külgedele korraga.
`2`	Esimene väärtus ülemisele ja alumisele küljele, teine - vasakule ja paremale küljele.
`3`	Esimene väärtus ülemisele küljele, teine - vasakule ja paremale küljele, kolmas - alumisele küljele.
`4`	Esimene väärtus ülemisele küljele, teine - paremale küljele, kolmas - alumisele küljele, neljas - vasakule küljele.

Näide

Määrame ühe pikslise paksusega piiri:

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

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

Näide

Määrame 4 pikslise paksusega piiri:

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

#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:

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

#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:

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

#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:

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

#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:

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

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

Näide

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

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

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

Näide

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

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

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

Näide

Määrame erineva piiri erinevatele külgedele:

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

#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

atribuut border-style,
mis määrab piiri välimuse
atribuut border-color,
mis määrab piiri värvi
atribuut border,
mis on piiri lühendatud atribuut