Omadus border-style

Omadus border-style määrab piiri stiili kõigil külgedel korraga või eraldi iga külje jaoks. See on lühendatud omadus järgmiste omaduste jaoks: border-left-style, border-right-style, border-top-style, border-bottom-style.

Süntaks

selektor {
	border-style: väärtus;
}

Väärtused

Väärtus	Kirjeldus
`solid`	Pidev joon.
`dotted`	Piir punktidena.
`dashed`	Piir kriipsudena.
`ridge`	Piir kumerana.
`double`	Piir topeltjoonena. Et efekti näha, peab piiri paksus olema vähemalt `3px`.
`groove`	Nõgus piir.
`inset`	Sissevajunud piir.
`outset`	Kumer piir.
`none`	Piir puudub.

Vaikeväärtus: none.

Väärtuste arv

Omadus võib võtta 1, 2, 3 või 4 väärtust, mis antakse tühikuga eraldatuna:

Arv	Kirjeldus
`1`	Tüüp kõigile külgedele korraga.
`2`	Esimene väärtus ülemisele ja alumisele, teine - vasakule ja paremale piirile.
`3`	Esimene väärtus ülemisele, teine - vasakule ja paremale piirile, kolmas - alumisele.
`4`	Esimene väärtus ülemisele piirile, teine - paremale, kolmas - alumisele, neljas - vasakule piirile.

Näide . Väärtus solid

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

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

Näide . Väärtus dotted

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

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

Näide . Väärtus dashed

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

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

Näide . Väärtus ridge

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

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

Näide . Väärtus double

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

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

Näide . Väärtus groove

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

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

Näide . Väärtus inset

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

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

Näide . Väärtus outset

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

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

Näide

Selles näites on määratud erinevad piiri tüübid erinevatele elementide külgedele:

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

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

Näide

Ja nüüd on erinevatele elemendi külgedele määratud ka erinev piiri paksus ja selle värv:

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

Näide

Nüüd on ülemisele ja alumisele piirile määratud tüüp solid, aga paremale ja vasakule - dotted:

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

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

Vaata ka

omadus border-color,
mis määrab piiri värvi
omadus border-width,
mis määrab piiri paksuse
omadus border,
mis on piiri lühendatud omadus