CSS свойство border
Свойство CSS border — это сокращённое свойство, которое устанавливает значения border-width, border-style и border-color для всех четырёх сторон элемента. Отрицательные значения не допускаются.
Сокращённое свойство border используется, когда нужно задать одинаковые значения для всех четырёх сторон. Изменить границы можно с помощью свойств border-width, border-style и border-color, которые позволяют задавать разные значения для каждой стороны.
INFO
Если значение не задано, границы невидимы.
| Начальное значение | 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-color, где применяются 3 значения. Первое применяется к верхней границе, второе — к правой и левой, а третье — к нижней.
Пример свойства border с 3 значениями:
Пример свойства 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-width | Определяет ширину границы. Значение по умолчанию — "medium". |
| border-style | Определяет стиль границы. Значение по умолчанию — "none". |
| border-color | Определяет цвет границы. Значение по умолчанию — текущий цвет элемента. |
| initial | Устанавливает свойству значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Practice
Какие из перечисленных являются допустимыми стилями границ в CSS?