Osnove rada sa granicama u CSS

Sada ćemo naučiti kako da dodamo granicu elementima. To se radi pomoću tri svojstva: svojstvo border-width postavlja debljinu granice, border-color - boju, a border-style postavlja tip granice.

Prva dva svojstva rade na očigledan način: border-color prihvata boje u istom formatu kao i svojstvo color, a debljina granice se postavlja u pikselima. A evo svojstvo border-style prihvata vrednosti u vidu ključnih reči. Na primer, vrednost solid postavlja punu liniju.

Hajde da napravimo, na primer, granicu debljine 3 piksela, u vidu pune linije, crvene boje:

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

css#elem {
  border-width: 3px;    /* debljina 3px */
  border-style: solid;  /* u vidu linije */
  border-color: red;    /* crvena boja */
  width: 300px;
  height: 100px;
}

Результат:

U narednim lekcijama ćemo detaljnije razmotriti rad sa granicama.