A border-style tulajdonság

A border-style tulajdonság egyszerre minden oldalra, vagy külön-külön mindegyik oldalra állítja be a szegély stílusát. Rövidítő tulajdonság a következő tulajdonságokhoz: border-left-style, border-right-style, border-top-style, border-bottom-style.

Szintaxis

szelektor {
	border-style: érték;
}

Értékek

Érték	Leírás
`solid`	Folyamatos vonal.
`dotted`	Pontokból álló szegély.
`dashed`	Szaggatott vonalból álló szegély.
`ridge`	Kidomborodó vonalú szegély.
`double`	Dupla vonalból álló szegély. Ahhoz, hogy a hatás látható legyen, a szegély vastagságának legalább `3px`-nek kell lennie.
`groove`	Bemélyedő szegély.
`inset`	Behúzott szegély.
`outset`	Kidobott szegély.
`none`	Szegély hiánya.

Alapértelmezett érték: none.

Értékek száma

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

Darabszám	Leírás
`1`	Típus egyszerre minden oldalra.
`2`	Első érték a felső és az alsó oldalra, második - a bal és jobb oldali szegélyre.
`3`	Első érték a felső oldalra, második - a bal és jobb oldali szegélyre, 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 . Solid érték

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

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

Példa . Dotted érték

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

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

Példa . Dashed érték

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

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

Példa . Ridge érték

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

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

Példa . Double érték

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

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

Példa . Groove érték

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

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

Példa . Inset érték

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

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

Példa . Outset érték

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

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

Példa

Ebben a példában különböző típusú szegélyek vannak megadva az elem különböző oldalaira:

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

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

Példa

Most pedig az elem különböző oldalaira különböző vastagságú szegély és szín van megadva:

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

Példa

Most a felső és alsó szegélyre a solid típus, a jobb és bal oldalira pedig dotted típus van megadva:

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

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

Lásd még

a border-color tulajdonság,
amely a szegély színét állítja be
a border-width tulajdonság,
amely a szegély vastagságát állítja be
a border tulajdonság,
amely a szegélyre vonatkozó rövidítő tulajdonság