Understanding CSS stroke-linecap for Custom SVG Strokes

Introduction

The stroke-linecap property in CSS defines the shape of the ends of open paths in SVG elements. It allows web developers and designers to customize the appearance of lines, paths, and other shapes in their web designs.

Specification

The stroke-linecap property is specified in the [CSS Fill and Stroke Module Level 3]WebsiteUrl. This module defines the properties used for filling and stroking vector graphics in web design and development.

Description

The stroke-linecap property is used to define the shape of the ends of open paths in SVG elements’ strokes. This property can be applied to any SVG shape that has unclosed strokes, such as lines, paths, and polygons. It can also be used with text-content elements. Because it is an inherited property, you can apply it to container elements like <g>, and it will affect the strokes of descendant elements as well.

Syntax

The stroke-linecap property in CSS is straightforward to use. Below is the syntax for applying this property to your SVG elements:

/* Keyword values */
stroke-linecap: butt;
stroke-linecap: round;
stroke-linecap: square;

/* Global values */
stroke-linecap: inherit;
stroke-linecap: initial;
stroke-linecap: revert;
stroke-linecap: revert-layer;
stroke-linecap: unset;

Values

butt

The butt value indicates that the stroke for each subpath does not extend beyond its two endpoints. This means the stroke runs exactly to the endpoints (both the start and the end) of the path, and no further. On a zero-length subpath, the path will not be rendered at all. This is the default value.

Example:

stroke-linecap: butt;

round

The round value indicates that at the end of each subpath, the stroke will be extended by a half circle with a diameter equal to the stroke width. On a zero-length subpath, the stroke consists of a full circle centered at the subpath’s point.

Example:

stroke-linecap: round;

square

The square value indicates that at the end of each subpath, the stroke will be extended by a rectangle with a width equal to half the width of the stroke and a height equal to the width of the stroke. On a zero-length subpath, the stroke consists of a square with its width equal to the stroke width, centered at the subpath’s point.

Example:

stroke-linecap: square;

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its default value (butt).
• revert: Reverts the property to the value set by the user agent’s default stylesheet.
• revert-layer: Reverts the property to the value set by the user agent’s default stylesheet for the current layer.
• unset: Resets the property to its default value or inherits it if it is an inherited property.

Example:

stroke-linecap: inherit;
stroke-linecap: initial;
stroke-linecap: revert;
stroke-linecap: revert-layer;
stroke-linecap: unset;

Formal Definition

The stroke-linecap property in CSS is formally defined to control the appearance of the ends of open paths in SVG elements’ strokes. This property allows web developers to customize the shape of stroke ends, enhancing the visual design of graphic elements.

Here are the key aspects of the formal definition of the stroke-linecap property:

Formal Syntax

The formal syntax of the stroke-linecap property in CSS defines how the property should be written and interpreted. The syntax specifies the acceptable values and their structure. Here is the formal syntax for the stroke-linecap property:

stroke-linecap = butt | round | square | inherit | initial | revert | revert-layer | unset

Examples

HTML

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#DDD" />
  <g stroke="dodgerblue" stroke-width="7">
    <path d="M 10,10 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

CSS

path:nth-of-type(1) {
  stroke-linecap: butt;
}
path:nth-of-type(2) {
  stroke-linecap: square;
}
path:nth-of-type(3) {
  stroke-linecap: round;
}

Linecaps

butt

The butt value is the default and indicates that the stroke for each subpath does not extend beyond its two endpoints. This means the stroke runs exactly to the endpoints (both the start and the end) of the path, and no further. On a zero-length subpath, the path will not be rendered at all.

round

The round value indicates that at the end of each subpath, the stroke will be extended by a half circle with a diameter equal to the stroke width. On a zero-length subpath, the stroke consists of a full circle centered at the subpath’s point.

square

The square value indicates that at the end of each subpath, the stroke will be extended by a rectangle with a width equal to half the width of the stroke and a height equal to the width of the stroke. On a zero-length subpath, the stroke consists of a square with its width equal to the stroke width, centered at the subpath’s point.

Stroke-linecap: Customizing Line Ends in SVG

The stroke-linecap property in CSS lets you customize the appearance of the ends of open subpaths in SVG elements.

Values and Their Effects

1. butt

   • Visual Effect: The stroke ends exactly at the endpoints, creating a sharp, straight edge.
   • Use Case: Perfect for clean, precise lines without extra decoration. Ideal for minimalist designs and technical drawings.
   • Example:

     stroke-linecap: butt;

2. round

   • Visual Effect: The stroke ends with a semicircle, creating a rounded appearance and slightly extending beyond the endpoints.
   • Use Case: Great for softening lines and creating a friendly, organic look.
   • Example:

     stroke-linecap: round;

3. square

   • Visual Effect: The stroke ends with a square cap, extending the stroke by half the stroke width.
   • Use Case: Useful for emphasizing line ends and creating a strong, geometric appearance.
   • Example:

     stroke-linecap: square;

Browser Compatibility

The stroke-linecap property is widely supported:

• Chrome: Full support.
• Firefox: Full support.
• Safari: Full support.
• Opera: Full support.
• Internet Explorer: Supported from version 9 onwards.

For the latest compatibility info, check Browser Compatibility Data (BCD).

Related Properties

• stroke-dasharray: Defines dash patterns.
• stroke-dashoffset: Specifies the starting point within the dash pattern.
• stroke-linejoin: Defines corner shapes.
• stroke-miterlimit: Controls the sharpness of miter joins.
• stroke-opacity: Sets stroke transparency.
• stroke-width: Sets stroke thickness.
• stroke: Shorthand for setting all stroke properties.
• SVG stroke-linecap attribute: Sets linecap style directly in SVG.

Summary

The stroke-linecap property is a powerful tool for customizing line ends in SVG. It helps you create clean, rounded, or square endpoints, enhancing the visual appeal of your designs. With excellent browser compatibility and related properties, you can achieve stunning and functional web designs.

For more insights, visit [MDN Web Docs]WebsiteUrl for comprehensive guidance and practical tips. Happy designing!