🖌️ CSS stroke — Complete Tutorial

The CSS stroke property is used to color and style theoutline of SVG shapes, such as icons, paths, circles, rectangles, and text. While fill paints the inside, stroke paints the border or edges of the shape.

>>“If fill paints the inside of an SVG, stroke draws the lines that define its shape.”

Note

✔ Works only on SVG elements (paths, shapes, text)

✔ Perfect for outline icons, borders, loaders, charts

✔ Often used together with stroke-width and stroke-linejoin

📌 What Elements Can Use stroke?

  • <path>
  • <circle>
  • <rect>
  • <line>
  • <polyline>
  • <polygon>
  • <text> (SVG text outline)

📦 Syntax

Basic Syntax

stroke: <color> | none | currentColor;

🎯 Common Values

ValueMeaning
stroke: red;Sets a red outline
stroke: none;Removes outline
stroke: currentColor;Inherits parent color — great for icons

🎨 1. Basic Example — Outline a Shape

Basic stroke example

svg path {
  stroke: #3498db;
  stroke-width: 2;
}

🎨 2. Outline Icon Using currentColor

This makes the SVG automatically match its parent’s text color.

Themed outline icon

.icon {
  color: purple;
}

.icon svg {
  stroke: currentColor;
  stroke-width: 2;
}

🎨 3. Remove Stroke

Remove outline

svg circle {
  stroke: none;
}

🎨 4. Gradient Stroke

Gradient stroke

svg path {
  stroke: url(#myGradient);
  stroke-width: 4;
}

📌 5. Style Stroke Appearance

➤ stroke-width

stroke-width

svg path {
  stroke-width: 4;
}

➤ stroke-linecap

Controls how stroke ends look.

stroke-linecap

svg line {
  stroke-linecap: round;   /* butt | round | square */
}

➤ stroke-linejoin

Controls corner shape of strokes.

stroke-linejoin

svg polyline {
  stroke-linejoin: bevel;   /* miter | round | bevel */
}

➤ stroke-dasharray

Creates dashed lines.

stroke-dasharray

svg path {
  stroke-dasharray: 5 3;   /* dash length | gap length */
}

➤ stroke-dashoffset

Offsets the start of dashes — used in animations.

stroke-dashoffset

svg path {
  stroke-dashoffset: 20;
}

🧪 Real-World Use Cases

1️⃣ Outline-Only Icons

Outline icon

.outline-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

2️⃣ Animated SVG Loader

SVG loader

circle {
  stroke: #ff4757;
  stroke-width: 6;
  stroke-dasharray: 90;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to {
    stroke-dashoffset: -180;
  }
}

3️⃣ Chart Visualization

Line chart

polyline {
  fill: none;
  stroke: #2ecc71;
  stroke-width: 3;
}

⚠️ Common Mistakes

  • ❌ Trying to apply stroke on HTML elements (div, p, span)
  • ❌ Using stroke on external SVG images (must be inline)
  • ❌ Forgetting to pair with stroke-width for visibility
  • ❌ Using fill instead of stroke for outline icons

Note

To style stroke, the SVG must be inline or use an exposed <use> element.

🔥 Summary

The stroke property is essential for drawing outlines in SVG graphics. It powers icons, loaders, charts, and any vector-based UI component.

>>“Stroke draws the shape. Fill completes it. Master both to master SVG.”