CSS-свойство border
Свойство border — сокращённое CSS-свойство, задающее рамку для всех четырёх сторон элемента. Примеры и интерактивная демонстрация.
CSS-свойство border является сокращённым и одновременно задаёт border-width, border-style и border-color для всех четырёх сторон элемента в одном объявлении. Отрицательные значения ширины не допускаются.
На этой странице рассматриваются сокращённый синтаксис, допустимые значения, способы задать разный вид каждой стороны, а также связанные свойства, к которым прибегают, когда сокращённой записи недостаточно.
Используйте сокращение border, если нужна одинаковая рамка на всех четырёх сторонах:
/* shorthand — all four sides identical */
border: 2px solid #1c87c9;
/* equivalent longhand */
border-width: 2px;
border-style: solid;
border-color: #1c87c9;Если стороны должны отличаться, задавайте полные свойства по отдельности — каждое из них принимает до четырёх значений в порядке верх–право–низ–лево. Можно также обращаться к отдельной стороне с помощью border-top, border-right, border-bottom и border-left.
Именно значение border-style заставляет рамку отображаться. Если задать только ширину и цвет, оставив стиль в значении по умолчанию none, рамка останется невидимой.
| Начальное значение | medium none currentColor |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Ширина, цвет и стиль рамки поддерживают анимацию. |
| Версия | CSS1 |
| DOM-синтаксис | object.style.border = "5px solid green"; |
Синтаксис
Синтаксис CSS-свойства border
border: border-width border-style border-color | initial | inherit;Пример свойства border:
Пример CSS-свойства border со значением solid
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "thick solid green".</p>
</body>
</html>Результат
Рассмотрим ещё один пример, в котором стиль рамки установлен в dashed, ширина — 3px, а цвет — синий.
Пример свойства border со значением «dashed»:
Пример CSS-свойства border со значением dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "3px dashed blue".</p>
</body>
</html>Сокращение border всегда рисует все четыре стороны одинаково. Чтобы изменить отдельную сторону, переопределите соответствующее полное свойство после него. В следующем примере одно объявление border-color принимает три значения: первое применяется к верхней стороне, второе — к правой и левой, третье — к нижней.
Пример свойства border с тремя значениями border-color:
Пример CSS-свойства border-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<div>Here 3 values are applied to the border-color property.</div>
</body>
</html>Пример свойства border-style:
Пример CSS-свойства border со значениями solid, dotted и double
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p,
div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p class="border1">A heading with a solid gray border.</p>
<p class="border2">A heading with a dotted blue border.</p>
<div>A div element with a thick double green border.</div>
</body>
</html>Скруглённые углы и связанные свойства
Сокращение border не управляет радиусом углов. Чтобы скруглить углы, добавьте отдельное свойство border-radius:
p {
border: 3px solid #1c87c9;
border-radius: 8px;
}Полезно знать и несколько связанных свойств:
- border-radius — скругляет углы.
- outline — рисует линию снаружи рамки, не занимающую место в потоке документа.
- border-collapse — объединяет смежные границы ячеек таблицы в одну линию.
Значения
Сокращение принимает три полных свойства рамки в любом порядке, а также глобальные ключевые слова.
| Значение | Описание |
|---|---|
| border-width | Задаёт ширину рамки. Значение по умолчанию — «medium». |
| border-style | Задаёт стиль рамки. Значение по умолчанию — «none». |
| border-color | Задаёт цвет рамки. Значение по умолчанию — текущий цвет элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |