Граница CSS — отдельные стороны
Вы можете задать разную границу для каждой стороны элемента.
В CSS есть отдельные свойства для каждой стороны: border-top-style, border-right-style, border-bottom-style и border-left-style.
Того же результата можно добиться с помощью сокращённого свойства border-style, которое принимает от одного до четырёх значений:
- Четыре значения (
dotted solid double dashed): верх, право, низ, лево. - Три значения (
dotted solid double): верх, затем право и лево, затем низ. - Два значения (
dotted solid): верх и низ, затем право и лево. - Одно значение (
dotted): все четыре стороны.
Это также работает с border-width и border-color.
Свойства для отдельных сторон
Каждая сторона задаётся своим свойством.
Prompt
HTML-страница, которая стилизует каждую сторону границы отдельно.
Во внутреннем блоке
<style> задайте абзацу border-top-style dotted, border-right-style solid, border-bottom-style dotted и border-left-style solid. Добавьте абзац, чтобы показать это.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>Different Border Styles</p>
</body>
</html>
Сокращение с двумя значениями
Сокращение border-style: dotted solid даёт тот же результат.
Prompt
HTML-страница, которая получает тот же результат по сторонам с помощью сокращения border-style.
Во внутреннем блоке
<style> задайте абзацу border-style "dotted solid", чтобы верх и низ были точечными, а левая и правая стороны — сплошными. Добавьте абзац, чтобы показать это.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<p>Different Border Styles</p>
</body>
</html>
От одного до четырёх значений
Количество значений меняет, какие стороны получают какой стиль.
Prompt
HTML-страница, показывающая, как ведёт себя border-style с четырьмя, тремя, двумя и одним значением.
Во внутреннем блоке
<style> создайте четыре класса абзаца: "dotted solid double dashed", "dotted solid double", "dotted solid" и "dotted". Добавьте подписанный абзац для каждого, чтобы разница была понятна.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.four {
border-style: dotted solid double dashed;
}
p.three {
border-style: dotted solid double;
}
p.two {
border-style: dotted solid;
}
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<p class="four">Four values: dotted top, solid right, double bottom, dashed left.</p>
<p class="three">Three values: dotted top, solid sides, double bottom.</p>
<p class="two">Two values: dotted top and bottom, solid sides.</p>
<p class="one">One value: all four sides dotted.</p>
</body>
</html>