Основи на работа с граници в 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;
}

Результат:

В следващите уроци ще разгледаме работата с граници по-подробно.