SVG

Stroke Line Cap

Utilities for sets the outline shape of an SVG.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
stroke-butt	stroke-linecap: butt
stroke-round	stroke-linecap: round
stroke-square	stroke-linecap: square

Usage

Set a SVG image with stroke linecap property.

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

<svg class="stroke-butt ... stroke-current stroke-2 ... text-amber-4">
  ...
</svg>

HTML

svg {
  @extend
    .stroke-butt,
    .stroke-current,
    .stroke-2,
    .text-amber-4;
}

SCSS

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

<svg class="stroke-round ... stroke-current stroke-2 ... text-amber-4">
  ...
</svg>

HTML

svg {
  @extend
    .stroke-round,
    .stroke-current,
    .stroke-2,
    .text-amber-4;
}

SCSS

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

<svg class="stroke-square ... stroke-current stroke-2 ... text-amber-4">
  ...
</svg>

HTML

svg {
  @extend
    .stroke-square,
    .stroke-current,
    .stroke-2,
    .text-amber-4;
}

SCSS