CSS свойство stroke

Свойство stroke задает цвет внешней линии указанного графического элемента.

Свойства fill и stroke указывают внешний и внутренний цвет элемента.

Вы можете найти веб-цвета в нашем разделе цвета HTML.

Значение по умолчанию none
Применяется К формам и элементам с текстовым контентом.
Наследуется Да
Анимируемое Нет
Версия SVG 1.1 Specification
DOM Syntax Object.stroke = "#1c87c9";

Синтаксис

stroke: color | url | none | context-fill | context-stroke | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример свойства stroke</h2>
    <svg height="100" width="500">
      <g fill="none">
        <path stroke="#8ebf42" d="M5 20 l215 0" />
        <path stroke="#1c87c9" d="M5 40 l215 0" />
        <path stroke="#666" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример свойства stroke</h2>
    <svg viewBox="5 5 100 100">
      <style>
        path {
        fill: none;
        stroke-width: 3px;
        marker: url(#diamond);
        }
      </style>
      <path d="M 10,50 v -20 h 40 v -20" stroke="#666"/>
      <path d="M 30,70 v -20 h 40 v -20" stroke="#8ebf42"/>
      <path d="M 50,90 v -20 h 40 v -20" stroke="#1c87c9"/>
      <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
        markerUnits="userSpaceOnUse">
        <circle cx="6" cy="6" r="3"
          fill="#000" stroke="#ccc" stroke-width="1,5"/>
      </marker>
    </svg>
  </body>
</html>

Значения

Значение Описание
none Никакая расцветка не применяется.
color Устанавливает сплошной цвет. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
url URL-ссылка для добавления расцветки серверного элемента.
context-fill Использует значение fill из контекстного элемента.
context-stroke Использует значение stroke из контекстного элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera

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

What does the CSS 'stroke' property do?
Считаете ли это полезным?