CSS-свойство border

Свойство border позволяет определять стиль, ширину и цвет границ рамки CSS:

CSS-свойство border

Свойство border-style

Свойство border-style определяет тип отображения границы.

Это свойство принимает следующие значения:

  • dotted – граница в точечку;
  • dashed – штриховая граница;
  • solid – сплошная граница;
  • double – двойная граница;
  • groove – трехмерная CSS рамка вокруг текста. Эффект зависит от значения border-color;
  • ridge – трехмерная выпуклая рамка. Эффект зависит от значения border-color;
  • inset – трехмерная утопленная рамка. Эффект зависит от значения border-color;
  • outset – трехмерная внешняя граница. Эффект зависит от значения border-color;
  • none – отключение границы;
  • hidden – скрытая граница.

Свойство border-style может принимать от одного до четырех значений (для верхней, правой, нижней и левой границ).

Пример

Примечание: ни одно из представленных далее CSS-свойств для оформления границ не будет работать до тех пор, пока border-style не установлено.

Свойство border-width

Свойство border-width определяет ширину четырех границ. Можно указывать ее конкретный размер (в px, pt, cm, em, и т. д.) либо использовать одно из трех предустановленных значений: thin, medium или thick.

Свойство border-width может иметь от одного до четырех значений (для верхней, правой, нижней и левой рамки CSS).

Пример

Свойство border-color

Свойство border-color используется для указания цвета четырех границ.

Цвет можно установить с помощью:

  • Названия: red, blue;
  • Hex-значения: #ff0000;
  • RGB-значения: rgb(255,0,0);
  • Сделать прозрачным: значение transparent.

Свойство border-color может иметь от одного до четырех значений (для верхней, правой, нижней и левой границ).

Если значение border-color не установлено, то наследуется цвет элемента.

Пример

Border: отдельная стилизация границ

Из приведенных выше примеров видно, что можно устанавливать разную стилизацию для каждой стороны блока. В CSS-коде также имеются свойства для стилизации отдельных границ (top, right, bottom и left):

Пример

Приведенный выше пример даст тот же результат, что и:

Пример

Если у свойства border-style четыре значения:

• border-style: dotted solid double dashed;
o верхняя граница будет точечной.
o правая граница будет сплошной.
o нижняя CSS двойная рамка.
o левая граница будет в штрих.

Если у свойства border-style три значения:

• border-style: dotted solid double;
o верхняя граница будет точечной.
o правая и левая границы будут сплошными.
o нижняя граница будет двойной.

Если у свойства border-style два значения:

• border-style: dotted solid;
o верхняя и нижняя CSS рамки вокруг изображения будут точечными.
o правая и левая границы будут сплошными.

Если у свойства border-style одно значение:

• border-style: dotted;
o все четыре границы будут точечными.

В приведенном выше примере использовалось свойство border-style. Однако тот же принцип работы и у border-width, и у border-color.

Короткое свойство border

Чтобы сократить объем кода, значение для каждой отдельной границы можно указывать одним свойством:

  • border-width;
  • border-style (обязательное свойство);
  • border-color.

Пример

Также можно выставлять свойства какой-то конкретной границы с одной из сторон:

Левая граница

Пример

Нижняя граница

Пример

Закругленные границы

Свойство border-radius используется для создания закругленных углов у CSS рамки вокруг текста или другого элемента.

Закругленные границы

Пример

Примечание: свойство border-radius не поддерживается в IE 8 и более ранних версиях.

Все свойства границ в CSS

Свойство Описание
Border Позволяет выставить все свойства границ одним объявлением.
border-bottom Позволяет выставить все свойства нижней границы одним объявлением.
border-bottom-color Установка цвета нижней границы.
border-bottom-style Установка стилизации нижней границы.
border-bottom-width Установка толщины нижней границы.
border-color Установка цвета четырех границ
border-left Позволяет выставить все свойства левой границы одним объявлением.
border-left-color Установка цвета левой рамки вокруг картинки CSS.
border-left-style Установка стиля левой границы.
border-left-width Установка толщины левой границы.
border-right Позволяет выставить все свойства правой границы одним объявлением.
border-right-color Установка цвета правой границы.
border-right-style Установка стиля правой границы.
border-right-width Установка толщины правой границы.
border-style Установка стиля четырех границ.
border-top Позволяет выставить все свойства верхней границы одним объявлением.
border-top-color Установка цвета верхней границы.
border-top-style Установка стиля верхней границы.
border-top-width Установка толщины верхней границы.
border-width Установка толщины четырех рамок CSS.

Перевод статьи “CSS Border Properties” был подготовлен дружной командой проекта Сайтостроение от А до Я.