SVG

Stroke Line Cap

Utilities for sets the outline shape of an SVG.

Variant

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

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