Veturia border-style

Veturia border-style përcakton stilin e kufirit për të gjitha anët njëkohësisht ose veçmas për secilën anë. Është veturi-shkurtim për vetitë e mëposhtme: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksa

përzgjedhësi {
	border-style: vlera;
}

Vlerat

Vlera	Përshkrimi
`solid`	Vijë e vazhdueshme.
`dotted`	Kufir në formë pikash.
`dashed`	Kufir në formë vizash.
`ridge`	Kufir në formë vije konvekse.
`double`	Kufir në formë vije të dyfishtë. Për të parë efektin, trashësia e kufirit duhet të jetë së paku `3px`.
`groove`	Kufir konkav.
`inset`	Kufir i brendshëm (i shtypur).
`outset`	Kufir i jashtëm (konveks).
`none`	Mungesë kufiri.

Vlera e parazgjedhur: none.

Numri i vlerave

Veturia mund të marrë 1, 2, 3 ose 4 vlera, të specifikuara ndarë me hapësirë:

Sasia	Përshkrimi
`1`	Lloji për të gjitha anët njëkohësisht.
`2`	Vlera e parë për pjesën e sipërme dhe të poshtme, e dyta - për kufijtë e majtë dhe të djathtë.
`3`	Vlera e parë për pjesën e sipërme, e dyta - për kufijtë e majtë dhe të djathtë, e treta - për atë të poshtme.
`4`	Vlera e parë për kufirin e sipërm, e dyta - për të djathtin, e treta - për të poshtmin, e katërta - për kufirin e majtë.

Shembull . Vlera solid

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

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

Shembull . Vlera dotted

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

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

Shembull . Vlera dashed

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

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

Shembull . Vlera ridge

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

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

Shembull . Vlera double

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

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

Shembull . Vlera groove

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

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

Shembull . Vlera inset

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

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

Shembull . Vlera outset

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

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

Shembull

Në këtë shembull janë përcaktuar lloje të ndryshme kufiri për anët e ndryshme të elementit:

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

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

Shembull

Tani për anët e ndryshme të elementit është përcaktuar gjithashtu trashësi e ndryshme kufiri dhe ngjyra e tij:

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

Shembull

Tani për kufirin e sipërm dhe të poshtëm është përcaktuar lloji solid, ndërsa për të djathtin dhe të majtin - dotted:

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

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

Shihni gjithashtu

veturia border-color,
e cila përcakton ngjyrën e kufirit
veturia border-width,
e cila përcakton trashësinë e kufirit
veturia border,
e cila është veturi-shkurtim për kufirin