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

Результат:

В следующих уроках мы рассмотрим работу с границами более подробно.