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

Сейчас мы с вами научимся добавлять границу элементам. Это делается при помощи трех свойств: свойство `border-width` задает толщину границы, `border-color` - цвет, а `border-style` задает тип границы.

Первые два свойства работают очевидным образом: `border-color` принимает цвета в том же формате, что и свойство `color`, а толщина границы задается в пикселях. А вот свойство `border-style` принимает значения в виде ключевых слов. Например, значение `solid` задает сплошную линию.

Сделаем, к примеру, границу толщиной `3` пикселя, в виде сплошной линии, красного цвета:

`<div id="elem"></div>` `#elem { border-width: 3px; /* толщина 3px */ border-style: solid; /* в виде линии */ border-color: red; /* красный цвет */ width: 300px; height: 100px; }`

:

Давайте теперь посмотрим на примерах, какие еще есть типы границы.

## Значение solid

Значение `solid` - сплошная линия:

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: solid; border-color: black; width: 300px; height: 100px; }`

:

## Значение dotted

Значение `dotted` - линия в виде точек:

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: dotted; border-color: black; width: 300px; height: 100px; }`

:

## Значение dashed

Значение `dashed` - линия в виде тире:

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: dashed; border-color: black; width: 300px; height: 100px; }`

:

## Значение ridge

Значение `ridge` - выпуклая линия:

`<div id="elem"></div>` `#elem { border-width: 3px; border-style: ridge; border-color: black; width: 300px; height: 100px; }`

:

## Значение double

Значение `double` - двойная линия:

`<div id="elem"></div>` `#elem { border-width: 5px; border-style: double; border-color: black; width: 300px; height: 100px; }`

:

## Практические задачи

←→
↑