CSS-свойство border
позволяет вам определять стиль границы элемента.
Границы появляются между полем (margin
) и отступом (padding
) элемента. Граница может быть предопределена стилями, например сплошной, пунктирной, двойной линией и т. д., или изображением.
В этом разделе мы поговорим о том, как установить стиль, цвет и ширину границы.
Различные стили border
Свойство border-style
устанавливает стиль границы блока, например: solid
, dotted
и т. д. Это более короткое свойство для стилизации границ всех четырех сторон элемента.
Свойство border-style
может принимать следующие значения: none
, hidden
, solid
, dashed
, dotted
, double
, inset
, outset
, groove
, и ridge
. Теперь давайте взглянем на следующую иллюстрацию: она дает вам представление о различиях между типами стилей границ.
Значения none
и hidden
не отображают границы, однако между этими двумя значениями есть небольшая разница. В случае коллапса (collapse, преобразования соседних границ в одну) ячейки таблицы и границы значение none
имеет самый низкий приоритет, тогда как hidden
имеет самый высокий приоритет, если установлено любое другое конфликтующее свойство.
Значения inset
, outset
, groove
и ridge
создают 3D-подобный эффект, который существенно зависит от значения цвета границы. Обычно это достигается созданием «тени» из двух цветов, которые немного светлее и темнее, чем цвет границы. Давайте посмотрим на пример:
h1 {
border-style: dotted;
}
p {
border-style: ridge;
}
Вы должны указать border-style
для того, чтобы граница появилась вокруг элемента, потому что стиль границы по умолчанию — none
. Ширина или толщина границы по умолчанию — medium
, а цвет границы по умолчанию такой же, как и color
текста.
Свойство border-width
Свойство border-width
определяет ширину границы. Это короткое свойство для одновременной установки толщины всех четырех сторон элемента.
Посмотрим следующий пример, чтобы понять, как это работает:
p {
border-style: dashed;
border-width: 10px;
}
Ширина границы может быть указана с использованием любого значения длины, например, px
, em
, rem
и т. д. Ширина границы также может быть указана с использованием одного из трех ключевых слов: thin
, medium
, и thick
. Значения в процентах не допускаются.
Свойство border-color
Свойство border-color
определяет цвет (color
) границы. Это также короткое свойство для установки цвета всех четырех сторон элемента.
Следующие правила добавляют сплошную границу красного цвета вокруг абзацев.
p {
border-style: solid;
border-color: #ff0000;
}
CSS-свойство border-width
или border-color
не будут работать, если используются раздельно. Используйте свойство border-style
, чтобы сначала установить стиль границы.
Сокращенное свойство border
CSS-свойство border
является кратким свойством для установки одного или нескольких отдельных свойств border-width
, border-style
и border-color
в одном правиле.
Давайте посмотрим на следующий пример, чтобы понять, как это свойство работает:
p {
border: 5px solid #00ff00;
}
Если значение для отдельного свойства границы опущено или не указано при настройке сокращенного свойства, вместо него будет использоваться значение по умолчанию для этого свойства, если оно есть.
Например, если значение для свойства border-color
отсутствует или не указано при установке границы, свойство color
элемента будет использоваться в качестве значения для цвета границы.
В приведенном ниже примере граница будет сплошной красной линией шириной 5 пикселей:
p {
color: red;
border: 5px solid;
}
Но в случае border-style
отсутствие значения не будет отображать границы вообще, поскольку значением по умолчанию для этого свойства является none
. В следующем примере границы не будет:
p {
border: 5px #00ff00;
}