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;
}
