stroke-width

The stroke-width property in CSS is for setting the width of a border on SVG shapes.

.module {
  stroke-width: 2;
}

Remember:

• This will override a presentation attribute <path stroke-width="2" ... />
• This will not override an inline style e.g. <path style="stroke-width: 2;" ... />

Values

The stroke-width property can accept any number, including whole numbers, decimals, and percentages:

• stroke-width: 2px
• stroke-width: 2em
• stroke-width: 2
• stroke-width: 2.5
• stroke-width: 15%

Note that a unit identifier (i.e. px and em) are not required. A number without units is a value based on the coordinate system of the SVG viewBox. So, for example, 5 renders the same as 5% in a viewBox that is set to 0 0 100 100 (5/100 = .05 or 5%) but 10% in one that’s 0 0 50 50 (5/50 = .1 or 10%).

See the Pen stroke-width property by CSS-Tricks (@css-tricks) on CodePen.

Related

• stroke
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap

More Information

• SVG 1.1 Spec
• MDN on fills and strokes

Browser Support