CSS apmales pamati

Tagad mēs iemācīsimies pievienot apmali elementiem. Tas tiek darīts, izmantojot trīs īpašības: īpašība border-width nosaka apmales biezumu, border-color - krāsu, un border-style norāda apmales veidu.

Pirmās divas īpašības darbojas acīmredzamā veidā: border-color pieņem krāsas tādā pašā formātā kā īpašība color, un apmales biezums tiek norādīts pikseļos. Bet īpašība border-style pieņem vērtības atslēgvārdu veidā. Piemēram, vērtība solid norāda nepārtrauktu līniju.

Izveidosim, piemēram, apmali ar biezumu 3 pikseļi, nepārtrauktas līnijas veidā, sarkanā krāsā:

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

css#elem {
  border-width: 3px;    /* biezums 3px */
  border-style: solid;  /* līnijas veidā */
  border-color: red;    /* sarkana krāsa */
  width: 300px;
  height: 100px;
}

Результат:

Nākamajās nodarbībās mēs sīkāk apskatīsim darbu ar apmalēm.