Osnove dela z obrobami v CSS

Zdaj se bomo naučili dodajati obrobo elementom. To naredimo s tremi lastnostmi: lastnost border-width določa debelino obrobe, border-color - barvo, border-style pa določa tip obrobe.

Prvi dve lastnosti delujeta očitno: border-color sprejema barve v enakem formatu kot lastnost color, debelina obrobe pa je določena v slikovnih pikah. Lastnost border-style pa sprejema vrednosti v obliki ključnih besed. Na primer, vrednost solid določa polno črto.

Naredimo na primer obrobo debeline 3 pik, v obliki polne črte, rdeče barve:

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

css#elem {
  border-width: 3px;    /* debelina 3px */
  border-style: solid;  /* v obliki črte */
  border-color: red;    /* rdeča barva */
  width: 300px;
  height: 100px;
}

Результат:

V naslednjih lekcijah bomo delo z obrobami obravnavali podrobneje.