Vlastnost border-width

Vlastnost border-width nastavuje šířku ohraničení pro všechny strany současně nebo samostatně pro každou stranu. Je zkratkovou vlastností pro vlastnosti border-left-width, border-right-width, border-top-width, border-bottom-width.

Hodnotou vlastnosti jsou libovolné jednotky pro velikosti, kromě procent, nebo klíčová slova thin (ohraničení o šířce 2 pixelů), medium (ohraničení o šířce 4 pixelů) nebo thick (ohraničení o šířce 6 pixelů). Výchozí hodnota: medium.

Syntaxe

selektor {
	border-width: 1, 2, 3 nebo 4 hodnoty;
}

Počet hodnot

Vlastnost může přijímat 1, 2, 3 nebo 4 hodnot, uvedených mezerou oddělených:

Počet	Popis
`1`	Typ pro všechny strany současně.
`2`	První hodnota pro horní a dolní stranu, druhá - pro levou a pravou ohraničení.
`3`	První hodnota pro horní stranu, druhá - pro levou a pravou ohraničení, třetí - pro dolní.
`4`	První hodnota pro horní ohraničení, druhá - pro pravé, třetí - pro dolní, čtvrtá - pro levé ohraničení.

Příklad

Nastavíme ohraničení o šířce jeden pixel:

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

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

Příklad

Nastavíme ohraničení o šířce 4 pixely:

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

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

Příklad

Nastavíme šířku horního a dolního ohraničení na 1px, a pravého a levého - na 4px:

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

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

Příklad

Nastavíme šířku horního ohraničení na 1px, pravého a levého - na 4px, a dolního na 6px:

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

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

Příklad

Nastavíme šířku horního ohraničení na 1px, pravého na 4px, dolního - na 6px, a levého na 8px:

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

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

Příklad

Nastavíme šířku ohraničení klíčovým slovem thin:

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

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

Příklad

Nastavíme šířku ohraničení klíčovým slovem medium:

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

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

Příklad

Nastavíme šířku ohraničení klíčovým slovem thick:

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

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

Příklad

Nastavíme různé ohraničení pro různé strany:

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

Viz také

vlastnost border-style,
která nastavuje vzhled ohraničení
vlastnost border-color,
která nastavuje barvu ohraničení
vlastnost border,
která je zkratkovou vlastností pro ohraničení