CSS Stroke-Linejoin Customize SVG Corners

Introduction

The stroke-linejoin CSS property defines the shape of corners in SVG paths when they are stroked. This property helps you customize SVG shapes and text, making your web designs look sharp and polished. You can apply stroke-linejoin to various SVG elements like <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>. It can also be inherited by container elements like <g>, ensuring consistent styling across complex graphics.

Syntax

The syntax for stroke-linejoin is straightforward:

/* Keyword values */
stroke-linejoin: bevel;
stroke-linejoin: miter;
stroke-linejoin: round;

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

• bevel: Creates a beveled corner.
• miter: Forms a sharp corner (default value).
• round: Rounds the corner.

Values

The stroke-linejoin property accepts several keyword values:

bevel

Creates a beveled corner by truncating the corner with a line.

miter

Forms a sharp corner by extending the outer edges of the stroke until they intersect. This is the default value.

round

Rounds the corner by truncating the join and adding a filled arc.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the value to its default (miter).
• revert: Resets the value to the user agent’s default.
• revert-layer: Resets the value to the style defined by the previous cascade layer.
• unset: Resets the value to its natural value, acting as inherit if the property is inherited, or initial if not.

Formal Definition

The stroke-linejoin property is formally defined to specify the shape of corners in stroked SVG paths.

Formal Syntax

The formal syntax for stroke-linejoin is:

stroke-linejoin =
  [ crop | arcs | miter ] ||
  [ bevel | round | fallback ]

• crop, arcs, and fallback are defined but not supported by major browsers.
• miter, bevel, and round are the commonly used values.

Examples

Here’s how to use stroke-linejoin in practice:

HTML

<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path d="M2,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
  </g>
</svg>

CSS

path:nth-child(1) {
  stroke-linejoin: bevel;
}
path:nth-child(2) {
  stroke-linejoin: round;
}
path:nth-child(3) {
  stroke-linejoin: miter;
}
path:nth-child(4) {
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

Results

• The first path has beveled corners.
• The second path has rounded corners.
• The third path has sharp, mitered corners.
• The fourth path has mitered corners with a stroke-miterlimit of 2.

Specifications

The stroke-linejoin property is defined in the CSS Fill and Stroke Module Level 3 specification.

Browser Compatibility

The stroke-linejoin property is widely supported across modern browsers:

• Google Chrome: Full support.
• Mozilla Firefox: Full support.
• Safari: Full support.
• Microsoft Edge: Full support.
• Opera: Full support.

This ensures consistent rendering of SVG graphics across different platforms.

Related CSS Properties

To create more advanced and visually appealing SVG graphics, check out these related CSS properties:

• stroke-dasharray: Controls the pattern of dashes and gaps in your strokes. Great for custom patterns.
• stroke-dashoffset: Specifies where the dash pattern starts. Useful for animations and dynamic effects.
• stroke-linecap: Defines the shape of the ends of open paths. Ensures a polished look.
• stroke-miterlimit: Controls the sharpness of mitered corners. Prevents excessive miter lengths when used with miter.
• stroke-opacity: Sets the opacity of the stroke. Perfect for semi-transparent strokes and layering effects.
• stroke-width: Sets the width of the stroke. Essential for controlling line thickness.
• stroke: A shorthand property to set multiple stroke-related properties in one go. Simplifies your CSS.

SVG Attribute

• stroke-linejoin attribute: Used directly in SVG elements to define corner shapes. Helps integrate CSS and SVG techniques seamlessly.

Conclusion

By understanding and using these properties effectively, you can create high-quality, visually appealing SVG graphics. Whether you’re a seasoned developer or just starting out, mastering these skills will greatly enhance your ability to create engaging and professional web designs.

Happy designing! 😊