Рамка вокруг элемента. Свойство border

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

В общем виде свойство записывается так:

selector {
  border: border-width border-style border-color;
}

border-width — задаёт толщину границы.

border-style — устанавливает стиль рамки.

border-color — определяет цвет рамки.

p {
  border: 3px solid black;
}

Значения свойства border

Border-width

Свойство border-width определяет толщину рамки и может быть задано в пикселях (px), процентах (%) или описано ключевым словом — thin, medium, thick.

• thin — тонкая граница, обычно около одного пикселя.
• medium — средняя граница, около трёх пикселей.
• thick — толстая граница, примерно пять пикселей.

p {
  border: medium solid black;
}

Border-style

border-style — задаёт стиль границы и может принимать одно из значений — none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

none — рамка отсутствует.

hidden — граница скрыта, но она занимает место.

dotted — точечная рамка.

dashed — пунктирная рамка.

solid — сплошная линия границы.

double — двойная рамка.

groove — объёмная рифлёная вдавленная рамка.

ridge — объёмная рифлёная выпуклая рамка.

inset — объёмная вдавленная рамка.

outset — объёмная выпуклая рамка.

Border-color

border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

Наследование

Свойство border не наследуется от родительских элементов. Граница, заданная для одного элемента, не будет применяться к его дочерним элементам.

Для чего использовать свойство border

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

Создание теней или выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline, для создания различных эффектов теней или выделений.

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

Нюансы

Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top, border-right, border-bottom и border-left.

div {
  border-top: 3px solid black;
  border-right: 4px dotted blue;
  border-bottom: 4px dashed green;
  border-left: 4px double red;
}

Для создания рамок с закруглёнными углами используют свойство border-radius.

div {
  border: 3px solid green;
  border-radius: 30px; 
}