Основи на работата со граници во CSS

Сега ќе научиме како да додадеме граница на елементите. Ова се прави со помош на три својства: својството border-width ја одредува дебелината на границата, border-color - бојата, а border-style го одредува типот на границата.

Првите две својства работат на очигледен начин: border-color прифаќа бои во истиот формат како и својството color, а дебелината на границата се задава во пиксели. А покрај тоа, својството border-style прифаќа вредности во форма на клучни зборови. На пример, вредноста solid задава цврста линија.

Ајде да направиме, на пример, граница со дебелина од 3 пиксели, во форма на цврста линија, црвена боја:

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

css#elem {
  border-width: 3px;    /* дебелина 3px */
  border-style: solid;  /* во форма на линија */
  border-color: red;    /* црвена боја */
  width: 300px;
  height: 100px;
}

Результат:

Во следните лекции ќе ја разгледаме работата со граници подетално.