С помощью CSS Вы сможете оформлять границы HTML элементов.

Стиль границ

CSS свойство border-style позволяет установить стиль для границ HTML элемента.

Значения для установки стилей границ:

• solid границы будут нарисованы сплошной линией;
• dashed границы будут нарисованы пунктирной линией;
• dotted границы будут нарисованы точками;
• double границы будут нарисованы двойной сплошной линией.

.bor1
{
border-style:solid;
}
.bor2
{
border-style:dashed;
}
.bor3 
{
border-style:dotted;
}

Обратите внимание: по умолчанию граница элементов всегда невидима (значение none).

Цвет границы

С помощью CSS свойства border-color Вы можете задать цвет границы HTML элемента.

Цвет может быть задан следующими способами:

1. С помощью имени (например 'red' задаст красный цвет);
2. С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
3. С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

.bor1
{
border-style:solid;
border-color:red;
}
.bor2
{
border-style:solid;
border-color:green;
}
.bor3 
{
border-style:solid;
border-color:blue;
}

Толщина границы

С помощью CSS свойства border-width Вы можете задать толщину границы HTML элемента.

Толщина может быть указана либо в пикселях, либо с помощью предопределенных значений: thin, medium, thick (тонкая, средняя, толстая).

.bor1 
{
border-style:solid;
border-width:4px;
}
.bor2
{
border-style:solid;
border-width:2px;
}
.bor3 
{
border-style:solid;
border-width:thin;
}

Задание стилей для отдельных сторон

Рассмотренные ранее свойства могут также применяться к отдельным сторонам границы. Их названия перечислены на рисунке ниже:

.bor1 
{
border-top-style:solid;
border-width:2px;
}
.bor2
{
border-bottom-style:solid;
border-width:2px;
}
.bor3 
{
border-left-style:solid;
border-right-style:solid;
border-width:2px;
}

Существует способ быстрого задания стилей границ. Например в результате применения border-style:dashed double solid groove; К верхней границе будет применено dashed, к правой double, к нижней solid, а к левой groove.

Если Вы укажете только два значения, например border-style:dashed double, то верхняя и нижняя граница будут оформлены как dashed, а левая и правая граница будут оформлены как double.

Стенографическое задание свойств

Для того чтобы сократить длину кода, в CSS предусмотрен стенографический способ записи.

Стенографическая форма записи объединяет все свойства оформления границ в одном свойстве border.

/* Вокруг элемента с классом bor1 будет отображена сплошная граница зеленого цвета, 
толщиной 2 пикселя */
.bor1 
{
border:2px solid green;
}

Порядок следования свойств в стенографической форме записи:

1. border-width
2. border-style
3. border-color

Обратите внимание: Вы можете пропускать неиспользуемые свойства.

/* Вокруг элемента с классом bor1 будет отображена сплошная граница толщиной 
1 пиксель */
.bor1 
{
border:1px solid;
}

Внешняя граница

Помимо обычной границы элементы могут иметь еще и внешнюю границу, которая задается с помощью CSS свойства outline.

.out1
{
outline-style:dashed; /* определяет стиль внешней границы */
outline-color:green; /* определяет цвет внешней границы */
outline-width:4px; /* определяет ширину внешней границы */
border-style:solid; 
}

Сделайте сами

Задание 1 исправьте ошибки оформления (после исправления всех ошибок элементы должны стать оформленными согласно их описанию).

<p id='par1'>Моя граница нарисована пунктирной линией. </p>
<p id='par2'>Моя граница нарисована сплошной линией красного цвета.</p>
<p id='par3'>Моя граница сверху и снизу нарисована сплошной линией, а слева и справа 
пунктирной. Границы со всех сторон нарисованы голубым цветом.</p>
<p id='par4'>Моя граница нарисована сплошной линией, толщиной 1 пиксель.</p>
<p id='par5'>Моя граница слева и справа нарисована сплошной линией розового цвета.</p>

Задание 2 оформите элементы согласно их описанию.

1. Я имею сплошную границу коричневого цвета.
2. Я имею сплошную границу красного цвета слева и справа.
3. Я имею сплошную границу розового цвета сверху, и пунктирную границу голубого цвета 
слева, справа и снизу.
4. Я имею границу оранжевого цвета толщиной 1 пиксель.
5. Я имею границу красного цвета толщиной 2 пикселя сверху и снизу и пунктирную границу 
серого цвета слева и справа.
6. Я имею сплошную границу #1435AD цвета и толщиной 1 пиксель.  
7. Я имею пунктирную границу #FF8100 цвета и толщиной 1 пиксель сверху и сплошную 
границу цвета #0B6124 и толщиной 2 пикселя снизу.