Egenskapen border-width

Egenskapen border-width anger bredden på kanten för alla sidor samtidigt eller varje sida för sig. Den är en sammanfattande egenskap för egenskaperna border-left-width, border-right-width, border-top-width, border-bottom-width.

Värdet på egenskapen kan vara valfri enhet för storlekar, förutom procent, eller nyckelorden thin (kant på 2 pixlar), medium (kant på 4 pixlar) eller thick (kant på 6 pixlar). Standardvärde: medium.

Syntax

selector {
	border-width: 1, 2, 3 eller 4 värden;
}

Antal värden

Egenskapen kan ta 1, 2, 3 eller 4 värden, angivna mellan mellanslag:

Antal	Beskrivning
`1`	Typ för alla sidor samtidigt.
`2`	Första värdet för toppen och botten, andra - för vänster och höger kant.
`3`	Första värdet för toppen, andra - för vänster och höger kant, tredje - för nedre.
`4`	Första värdet för den övre kanten, andra - för den högra, tredje - för den nedre, fjärde - för den vänstra kanten.

Exempel

Vi sätter en kant med bredd på en pixel:

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

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

Exempel

Vi sätter en kant med bredd på 4 pixlar:

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

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

Exempel

Vi sätter bredden på den övre och nedre kanten till 1px, och den högra och vänstra - till 4px:

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

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

Exempel

Vi sätter bredden på den övre kanten till 1px, den högra och vänstra - till 4px, och den nedre till 6px:

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

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

Exempel

Vi sätter bredden på den övre kanten till 1px, den högra till 4px, den nedre - till 6px, och den vänstra till 8px:

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

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

Exempel

Vi sätter kantens bredd med nyckelordet thin:

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

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

Exempel

Vi sätter kantens bredd med nyckelordet medium:

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

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

Exempel

Vi sätter kantens bredd med nyckelordet thick:

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

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

Exempel

Vi sätter olika kanter för olika sidor:

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

Se även

egenskapen border-style,
som anger kantens utseende
egenskapen border-color,
som anger kantens färg
egenskapen border,
som är en sammanfattande egenskap för kanten