Граница CSS — сокращённое свойство
Существует множество свойств границы, за которыми нужно следить. Чтобы сократить код, вы можете задать их все в одном свойстве border.
Сокращение border задаёт эти свойства в следующем порядке: border-width, border-style (обязательно) и border-color.
Вы также можете задать все значения только для одной стороны, используя border-left, border-right, border-top или border-bottom.
Все границы
Одно объявление задаёт ширину, стиль и цвет всех четырёх границ.
Prompt
HTML-страница, которая задаёт ширину, стиль и цвет одним объявлением границы.
Во внутреннем блоке
<style> задайте абзацу border: 5px solid red. Добавьте абзац, чтобы показать это.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Левая граница
Сокращение border-left задаёт ширину, стиль и цвет только для левой границы.
Prompt
HTML-страница, которая использует сокращение border-left только для одной стороны.
Во внутреннем блоке
<style> задайте абзацу border-left: 6px solid red. Добавьте абзац, чтобы показать только левую границу.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-left: 6px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Нижняя граница
Сокращение border-bottom задаёт только нижнюю границу.
Prompt
HTML-страница, которая использует сокращение border-bottom только для одной стороны.
Во внутреннем блоке
<style> задайте абзацу border-bottom: 6px solid red. Добавьте абзац, чтобы показать только нижнюю границу.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-bottom: 6px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>