Egenskapen border-width

Egenskapen border-width angir tykkelsen på kanten for alle sider samtidig eller separat for hver side. Den er en sammensatt egenskap for egenskapene border-left-width, border-right-width, border-top-width, border-bottom-width.

Verdien til egenskapen kan være alle enheter for størrelser, unntatt prosent, eller nøkkelordene thin (kant på 2 piksler), medium (kant på 4 piksler) eller thick (kant på 6 piksler). Standardverdi: medium.

Syntaks

velger {
	border-width: 1, 2, 3 eller 4 verdier;
}

Antall verdier

Egenskapen kan ta 1, 2, 3 eller 4 verdier, angitt mellom mellomrom:

Antall	Beskrivelse
`1`	Type for alle sider samtidig.
`2`	Første verdi for topp og bunn, andre - for venstre og høyre kant.
`3`	Første verdi for topp, andre - for venstre og høyre kant, tredje - for bunn.
`4`	Første verdi for øvre kant, andre - for høyre, tredje - for nedre, fjerde - for venstre kant.

Eksempel

La oss sette en kant med tykkelse på én piksel:

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

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

Eksempel

La oss sette en kant med tykkelse på 4 piksler:

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

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

Eksempel

La oss sette tykkelsen på øvre og nedre kant til 1px, og høyre og venstre - til 4px:

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

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

Eksempel

La oss sette tykkelsen på den øvre kanten til 1px, høyre og venstre - til 4px, og den nedre til 6px:

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

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

Eksempel

La oss sette tykkelsen på den øvre kanten til 1px, høyre til 4px, nedre - til 6px, og venstre til 8px:

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

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

Eksempel

La oss sette kanttykkelsen med nøkkelordet thin:

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

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

Eksempel

La oss sette kanttykkelsen med nøkkelordet medium:

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

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

Eksempel

La oss sette kanttykkelsen med nøkkelordet thick:

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

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

Eksempel

La oss sette forskjellig kant for forskjellige sider:

<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 også

egenskapen border-style,
som angir utseendet på kanten
egenskapen border-color,
som angir fargen på kanten
egenskapen border,
som er en sammensatt egenskap for kanten