CSS свойство border

В языке CSS за оформление рамок или обводок отвечает свойство border, а точнее, четыре свойства, названия которых начинаются с этого слова. Они позволяют вебмастеру управлять цветом, внешним видом, толщиной и формой углов рамки, которая обрамляет содержимое какого-либо блока.

Синтаксис и значения border

Свойств, отвечающих за оформление границы или рамки, – четыре. Вид определяет свойство border-style, ширину можно задать, используя border-width, с помощью border-color назначается цвет, border-radius закругляет углы. Также есть общее свойство border, в котором можно объединить все значения.

Его синтаксис:

border:  <border-width> || <border-style> || <color>

Например, создадим элемент и применим к нему свойства:

.element {
  width:100px;
  height:100px;
  border:2px solid red;
}

Значения свойства border здесь указывают, что у элемента должна быть рамка толщиной 2px, сплошная (solid), и красного цвета.

See the Pen
border simple by Андрей (@adlibi)
on CodePen.

border-style

С помощью border-style можно сделать рамку в виде пунктирной линии, последовательности точек, придать ей объем, а всему блоку эффект выпуклости или вдавленности. Значение по умолчанию – none (отсутствие рамок).

Ниже перечислены значения, которые можно задать свойству, и эффекты, которые при этом появляются.

solid

сплошная линия

none

по умолчанию – линии нет

double

двойная линия

dashed

пунктир

dotted

набор точек

groove

придание линии вогнутости

ridge

придание линии выпуклости

inset

эффект вдавленности блока

outset

эффект выпуклости блока

На примере ниже показаны все стили рамок, кроме solid, который продемонстрирован выше.

See the Pen
border style by Андрей (@adlibi)
on CodePen.

Примечание: при использовании стиля dashed соотношение длины штриха и ширины пробела зависит от браузера, в котором открыт сайт.

border-width

Толщина линии, образующей рамку, может задаваться как словом, так и количеством пикселей.

Возможные значения:

<length>

Числовая величина, измеряемая в px, em, rem, vh и vw.

thin

Эквивалент 1px

medium

Эквивалент 3px

thick

Эквивалент 5px

border-color

Цвет рамки можно задавать несколькими способами:

• словом – названием предустановленного цвета на английском языке – red, green, pink и т.д.;
• с помощью шестнадцатеричного числа, например #ff0099;
• с помощью RGB-модели – rgb (интенсивность каждого из цветов выражается числом от 0 до 255 или в процентах; значения разделяются запятыми).
• Посредством RGBA-модели, при которой четвертый параметр цвета – степень его прозрачности.

Цвет по умолчанию – black (черный). Установка значения transparent (border-color: transparent) означает полностью прозрачную рамку.

Примеры записи цвета:

border-color: red;
border-color: #aaaabb;
border-color: rgb(88, 255, 250);

border-radius

С помощью свойства можно уходить от квадратных углов, вводя величину радиуса скругления.

На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:

border-radius: 10px;

See the Pen
border radius by Андрей (@adlibi)
on CodePen.

Для каждого угла можно задать свой радиус скругления.

Так, для квадрата на примере ниже, задано такое свойство:

border-radius: 10px 20px 30px 20px;

Значения устанавливаются для углов по часовой стрелке.

See the Pen
border radius 4 by Андрей (@adlibi)
on CodePen.

Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.

Количество значений свойства	Результат
1	Все стороны выполнены в одном стиле
2	Стиль устанавливается отдельно для горизонтальных (1-е значение) и вертикальных границ (2-е значение)
3	1-е значение – верх лево; 2-е – верх право и низ лево; 3-е – низ право.
4	Все границы выполнены в разных стилях. Соответствие значениям (с 1-го по 4-е) – по часовой стрелке, начиная с верхней.

Интересно, что для каждого угла можно задать два параметра скругления через знак слэша. При этом первая величина – горизонтальный радиус, вторая – вертикальный. Показать это лучше на примере. Вот что получится, если для фигуры задать свойство:

border-radius: 10px/30px; 

See the Pen
border radius 2 by Андрей (@adlibi)
on CodePen.

Необходимо иметь в виду, что при задании свойства border-radius форма блока остается прежней, то есть прямоугольной, и при больших значениях радиусов, запланированная рамка вокруг текста может попасть на сам текст.

Радиуса скругления можно задавать в процентах. Это удобно, например, если вы хотите нарисовать круг, то просто задайте для квадрата border-radius: 50%;.

See the Pen
border radius 50percent by Андрей (@adlibi)
on CodePen.

Более детальные свойства

Существует и другой способ сделать обводку или придать ей определенный стиль для конкретной стороны рамки или угла. Для этого предусмотрены специальные расширения свойств, в названия которых входит обозначение стороны границы. Верхняя обозначается как top, нижняя – bottom, левая – left и правая – right.

Например:

• border-bottom-width
• border-left-color
• border-right-style
• border-top-left-radius.