Īpašība border-style

Īpašība border-style iestata apmales stilu visām malām vienlaikus vai atsevišķi katrai malai. Tā ir saīsinātā īpašība šādām īpašībām: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintakse

selektors {
	border-style: vērtība;
}

Vērtības

Vērtība	Apraksts
`solid`	Nepārtraukta līnija.
`dotted`	Apmale punktu veidā.
`dashed`	Apmale domuzīmju veidā.
`ridge`	Apmale izliektas līnijas veidā.
`double`	Apmale dubultlīnijas veidā. Lai redzētu efektu, apmales biezumam jābūt vismaz `3px`.
`groove`	Ieliekta apmale.
`inset`	Iegrimusi apmale.
`outset`	Izvirzīta apmale.
`none`	Apmales neesamība.

Noklusējuma vērtība: none.

Vērtību skaits

Īpašība var pieņemt 1, 2, 3 vai 4 vērtības, norādītas atdalītas ar atstarpēm:

Skaits	Apraksts
`1`	Tips visām malām vienlaikus.
`2`	Pirmā vērtība augšējai un apakšējai malai, otrā - kreisajai un labajai malai.
`3`	Pirmā vērtība augšējai malai, otrā - kreisajai un labajai malai, trešā - apakšējai malai.
`4`	Pirmā vērtība augšējai malai, otrā - labajai malai, trešā - apakšējai malai, ceturtā - kreisajai malai.

Piemērs . Vērtība solid

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

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

Piemērs . Vērtība dotted

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

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

Piemērs . Vērtība dashed

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

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

Piemērs . Vērtība ridge

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

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

Piemērs . Vērtība double

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

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

Piemērs . Vērtība groove

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

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

Piemērs . Vērtība inset

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

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

Piemērs . Vērtība outset

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

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

Piemērs

Šajā piemērā dažādiem elementa malām ir iestatīti dažādi apmales tipi:

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

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

Piemērs

Un šeit dažādām elementa malām ir iestatīts arī atšķirīgs apmales biezums un krāsa:

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

Piemērs

Šeit augšējai un apakšējai malai ir iestatīts tips solid, bet labajai un kreisajai - dotted:

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

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

Skatiet arī

īpašība border-color,
kas iestata apmales krāsu
īpašība border-width,
kas iestata apmales biezumu
īpašība border,
kas ir saīsinātā īpašība apmalei