Ширина границы CSS
Свойство border-width задаёт ширину четырёх границ.
Вы можете указать конкретный размер (в px, pt, cm, em и т. д.) или использовать одно из трёх готовых значений: thin, medium или thick.
Пример
Каждый абзац использует свою ширину границы.
Prompt
HTML-страница, демонстрирующая разные значения border-width.
Во внутреннем блоке
<style> создайте четыре класса абзаца: solid 5px, solid medium, dotted 2px и dotted thick. Каждый должен также задавать border-style. Добавьте абзац для каждого, подписав используемую ширину.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
</style>
</head>
<body>
<p class="one">5px border-width</p>
<p class="two">medium border-width</p>
<p class="three">2px border-width</p>
<p class="four">thick border-width</p>
</body>
</html>
Ширина для отдельных сторон
Свойство border-width может принимать от одного до четырёх значений — для верхней, правой, нижней и левой границ.
Пример
Два значения задают верх/низ и стороны, а четыре значения задают каждую сторону отдельно.
Prompt
HTML-страница, показывающая, как border-width может принимать от одного до четырёх значений для четырёх сторон.
Во внутреннем блоке
<style> создайте три класса абзаца со сплошной границей: один с "5px 20px", один с "20px 5px" и один с "25px 10px 4px 35px". Добавьте абзац для каждого.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>
<p class="one">5px top and bottom, 20px on the sides.</p>
<p class="two">20px top and bottom, 5px on the sides.</p>
<p class="three">25px top, 10px right, 4px bottom, 35px left.</p>
</body>
</html>