Stroke width

Syntax

Class
Properties
stroke-{value}
stroke-width: {value};

Parameters

value
<length-percentage unsigned default-unit=1px>
<div class="t1 flex flex-center w-320 p-32 bg-c-white shadow-4"> <svg class="t1 w-40 h-40 stroke-c-blue stroke-4" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 17L17 3M3 3l14 14" stroke-linecap="round"/></svg> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Set stroke width to 1px without specifying the px unit.
t1 stroke-1
.t1.stroke-1 { stroke-width: 1px; }
Set stroke width to 1px with specifying the px unit.
t1 stroke-1px
.t1.stroke-1px { stroke-width: 1px; }
Set stroke width to 5% of the SVG element.
t1 stroke-5%
.t1.stroke-5\% { stroke-width: 5%; }