Толщина контура в CSS

CSS Outline Width (Ширина контура)

Насколько толстым выглядит контур, зависит от свойства outline-width, которое принимает одно из следующих значений:

thin — обычно 1px.
medium — обычно 3px.
thick — обычно 5px.
собственный размер — в px, pt, cm, em и т.д.

Примеры CSS Outline Width

Контуры могут быть разной ширины, как показано здесь.

Пример

Четыре абзаца, у каждого своя ширина контура: thin, medium, thick и 8px.

HTML-страница, демонстрирующая различные значения outline-width.

Во внутреннем блоке `<style>` задайте абзацам отступ, сплошной зелёный контур, затем создайте четыре класса с outline-width thin, medium, thick и 8px. Добавьте подписанный абзац для каждого.

> Результат: полная HTML-страница

Prompt

HTML-страница, демонстрирующая различные значения outline-width. Во внутреннем блоке <style> задайте абзацам отступ, сплошной зелёный контур, затем создайте четыре класса с outline-width thin, medium, thick и 8px. Добавьте подписанный абзац для каждого.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  padding: 5px;
  outline-style: solid;
  outline-color: green;
}

p.ex1 {
  outline-width: thin;
}

p.ex2 {
  outline-width: medium;
}

p.ex3 {
  outline-width: thick;
}

p.ex4 {
  outline-width: 8px;
}
</style>
</head>
<body>

<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">An 8px thick outline.</p>

</body>
</html>