SVG

Stroke Line Cap v1.1.1

Utilities for sets the outline shape of an SVG.


Class

classcss
stroke-buttstroke-linecap: butt
stroke-roundstroke-linecap: round
stroke-squarestroke-linecap: square

Usage

Set a SVG image with stroke linecap property.

stroke-butt ends the stroke with a sharp 90-degree angle.

<!-- Example -->
<svg class="stroke-butt ... stroke-current stroke-2 ... text-amber-400">
...
</svg>

stroke-round adds a radius that smooths out the start and end points.

<!-- Example -->
<svg class="stroke-round ... stroke-current stroke-2 ... text-amber-400">
...
</svg>

stroke-square similar to butt except that it extends the stroke beyond the length of the path.

<!-- Example -->
<svg class="stroke-square ... stroke-current stroke-2 ... text-amber-400">
...
</svg>

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled