Pagrindiniai CSS kraštinių darbo principai

Dabar mes išmoksime pridėti kraštinę elementams. Tai daroma naudojant tris savybes: savybė border-width nustato kraštinės storį, border-color - spalvą, o border-style nustato kraštinės tipą.

Pirmosios dvi savybės veikia akivaizdžiai: border-color priima spalvas tame pačiame formate, kaip ir savybė color, o kraštinės storis nustatomas pikseliais. O štai savybė border-style priima reikšmes raktažodžių pavidalu. Pavyzdžiui, reikšmė solid nustato ištisinę liniją.

Sukurkime, pavyzdžiui, kraštinę, kurios storis 3 pikseliai, ištisinės linijos pavidalo, raudonos spalvos:

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

css#elem {
  border-width: 3px;    /* storis 3px */
  border-style: solid;  /* linijos pavidalu */
  border-color: red;    /* raudona spalva */
  width: 300px;
  height: 100px;
}

Результат:

Kitiose pamokose mes išsamiau aptarsime darbą su kraštinėmis.