Ī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

cssselektors {
  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

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

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

Результат:

Piemērs . Vērtība dotted

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

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

Результат:

Piemērs . Vērtība dashed

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

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

Результат:

Piemērs . Vērtība ridge

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

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

Результат:

Piemērs . Vērtība double

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

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

Результат:

Piemērs . Vērtība groove

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

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

Результат:

Piemērs . Vērtība inset

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

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

Результат:

Piemērs . Vērtība outset

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

css#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:

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

css#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:

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

css#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:

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

css#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