CSS stroke Property

The stroke property paints along the outline of the given graphical element.

The fill and stroke properties specify the paint used to render the interior and the stroke around shapes and text.

You can find web colors in the HTML colors section.

Initial Value none
Applies to Shapes and text content elements.
Inherited Yes.
Animatable No.
Version SVG 1.1 Specification
DOM Syntax Object.stroke = "#1c87c9";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</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>

Another example with the stroke property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</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>

Values

Value Description
none No paint is applied.
color Sets a solid color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
url A URL reference to a paint server element defining a paint server.
context-fill Uses the value of fill from a context element.
context-stroke Uses the value of stroke from a context element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles