Sifa ya border-style

Sifa border-style huweka mtindo wa mpaka kwa pande zote kwa wakati mmoja au kando kwa kila upande. Ni sifa iliyofupishwa kwa sifa zifuatazo: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntax

kichaguzi {
	border-style: thamani;
}

Thamani

Thamani	Maelezo
`solid`	Mstari kamili.
`dotted`	Mpaka kwa umbo la nukta.
`dashed`	Mpaka kwa umbo la mkato.
`ridge`	Mpaka kwa umbo la mstari uliyoinuka.
`double`	Mpaka kwa umbo la mstari maradufu. Ili kuona athari unene wa mpaka lazima uwe angalau `3px`.
`groove`	Mpaka uliowekwa ndani.
`inset`	Mpaka uliowekwa ndani.
`outset`	Mpaka uliyoinuka.
`none`	Kukosekana kwa mpaka.

Thamani chaguomsingi: none.

Idadi ya thamani

Sifa inaweza kuchukua 1, 2, 3 au 4 thamani, zikipewa kwa nafasi:

Idadi	Maelezo
`1`	Aina kwa pande zote kwa wakati mmoja.
`2`	Thamani ya kwanza kwa juu na chini, ya pili - kwa mpaka wa kushoto na kulia.
`3`	Thamani ya kwanza kwa juu, ya pili - kwa mpaka wa kushoto na kulia, ya tatu - kwa ya chini.
`4`	Thamani ya kwanza kwa mpaka wa juu, ya pili - kwa wa kulia, ya tatu - kwa wa chini, ya nne - kwa mpaka wa kushoto.

Mfano . Thamani solid

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

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

Mfano . Thamani dotted

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

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

Mfano . Thamani dashed

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

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

Mfano . Thamani ridge

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

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

Mfano . Thamani double

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

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

Mfano . Thamani groove

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

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

Mfano . Thamani inset

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

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

Mfano . Thamani outset

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

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

Mfano

Katika mfano huu aina tofauti za mpaka zimewekwa kwa pande tofauti za vipengele:

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

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

Mfano

Na sasa kwa pande tofauti za kipengele pia zimewekwa unene tofauti wa mpaka na rangi yake:

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

Mfano

Sasa kwa mpaka wa juu na chini umewekwa aina solid, na kwa wa kulia na kushoto - dotted:

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

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

Angalia pia

sifa border-color,
ambayo huweka rangi ya mpaka
sifa border-width,
ambayo huweka unene wa mpaka
sifa border,
ambayo ni sifa iliyofupishwa kwa mpaka