A border-width tulajdonság

A border-width tulajdonság a szegély vastagságát határozza meg egyszerre minden oldalon, vagy külön-külön minden egyes oldalra. Rövidítő tulajdonság a border-left-width, border-right-width, border-top-width, border-bottom-width tulajdonságok számára.

A tulajdonság értéke bármely méretegység lehet a százalékok kivételével, vagy a thin (2 pixel vastag szegély), medium (4 pixel vastag szegély) és thick (6 pixel vastag szegély) kulcsszavak. Alapértelmezett érték: medium.

Szintaxis

szelektor {
	border-width: 1, 2, 3 vagy 4 érték;
}

Értékek száma

A tulajdonság 1, 2, 3 vagy 4, szóközzel elválasztott értéket fogadhat:

Szám	Leírás
`1`	Ugyanaz a típus minden oldalon egyszerre.
`2`	Első érték a felső és alsó, második - a bal és jobb oldali szegélyekre.
`3`	Első érték a felső, második - a bal és jobb oldali szegélyekre, harmadik - az alsóra.
`4`	Első érték a felső szegélyre, második - a jobb oldalira, harmadik - az alsóra, negyedik - a bal oldali szegélyre.

Példa

Állítsunk be egy pixel vastag szegélyt:

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

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

Példa

Állítsunk be 4 pixel vastag szegélyt:

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

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

Példa

Állítsuk be a felső és alsó szegély vastagságát 1px-re, a jobb és bal oldalit pedig 4px-re:

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

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

Példa

Állítsuk be a felső szegély vastagságát 1px-re, a jobb és bal oldalit 4px-re, az alsót pedig 6px-ra:

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

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

Példa

Állítsuk be a felső szegély vastagságát 1px-re, a jobb oldalit 4px-re, az alsót - 6px-ra, a bal oldalit pedig 8px-ra:

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

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

Példa

Állítsuk be a szegély vastagságát a thin kulcsszóval:

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

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

Példa

Állítsuk be a szegély vastagságát a medium kulcsszóval:

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

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

Példa

Állítsuk be a szegély vastagságát a thick kulcsszóval:

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

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

Példa

Állítsunk be különböző szegélyt különböző oldalakra:

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

Lásd még

a border-style tulajdonság,
amely a szegély megjelenését határozza meg
a border-color tulajdonság,
amely a szegély színét határozza meg
a border tulajdonság,
amely a szegélyre vonatkozó rövidítő tulajdonság