Border-width-ominaisuus

Ominaisuus border-width asettaa reunan paksuuden kaikille sivuille samanaikaisesti tai erikseen kullekin sivulle. Se on lyhennysominaisuus ominaisuuksille border-left-width, border-right-width, border-top-width, border-bottom-width.

Ominaisuuden arvona voi olla mikä tahansa koko-yksiköistä, paitsi prosentit, tai avainsanat thin (reuna on 2 pikseliä), medium (reuna on 4 pikseliä) tai thick (reuna on 6 pikseliä). Oletusarvo on medium.

Syntaksi

valitsija {
	border-width: 1, 2, 3 tai 4 arvoa;
}

Arvojen määrä

Ominaisuus voi ottaa 1, 2, 3 tai 4 arvoa, jotka annetaan välilyönnillä erotettuna:

Määrä	Kuvaus
`1`	Tyyppi kaikille sivuille samanaikaisesti.
`2`	Ensimmäinen arvo ylä- ja alareunalle, toinen - vasemmalle ja oikealle reunalle.
`3`	Ensimmäinen arvo yläreunalle, toinen - vasemmalle ja oikealle reunalle, kolmas - alareunalle.
`4`	Ensimmäinen arvo yläreunalle, toinen - oikealle reunalle, kolmas - alareunalle, neljäs - vasemmalle reunalle.

Esimerkki

Asetetaan yhden pikselin paksuinen reuna:

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

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

Esimerkki

Asetetaan 4 pikselin paksuinen reuna:

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

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

Esimerkki

Asetetaan ylä- ja alareunan paksuus 1px:ksi ja oikean sekä vasemman reunan paksuus 4px:ksi:

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

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

Esimerkki

Asetetaan yläreunan paksuus 1px:ksi, oikean ja vasemman reunan paksuus 4px:ksi ja alareunan paksuus 6px:ksi:

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

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

Esimerkki

Asetetaan yläreunan paksuus 1px:ksi, oikean reunan paksuus 4px:ksi, alareunan paksuus 6px:ksi, ja vasemman reunan paksuus 8px:ksi:

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

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

Esimerkki

Asetetaan reunan paksuus avainsanalla thin:

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

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

Esimerkki

Asetetaan reunan paksuus avainsanalla medium:

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

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

Esimerkki

Asetetaan reunan paksuus avainsanalla thick:

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

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

Esimerkki

Asetetaan erilainen reuna eri sivuille:

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

Katso myös

ominaisuus border-style,
joka asettaa reunan ulkoasun
ominaisuus border-color,
joka asettaa reunan värin
ominaisuus border,
joka on reunan lyhennysominaisuus