CSS свойство stroke-width

Свойство stroke-width указывает толщину контура элемента.

Единицы измерения "px" или "em" не требуются.
Значение по умолчанию 1
Применяется К формам и элементам с текстовым контентом.
Наследуется Да
Анимируемое Нет
Версия SVG 1.1 Specification
DOM синтаксис Object.strokeWidth = "0.5";

Синтаксис

stroke-width: length | percentage | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример свойства stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="1" />
    </svg>
  </body>
</html>

Рассмотрим другой пример со свойством stroke-width:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример свойства stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="3" />
    </svg>
  </body>
</html>

В следующем примере толщина контура указана в процентах:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример свойства stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="2%" />
    </svg>
  </body>
</html>

Значения

Значение Описание
length Указывает толщину контура.
percentage Указывает толщину контура в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera

Практикуйте свои знания

What is true about the CSS property 'stroke-width'?
Считаете ли это полезным?