CSS marker-end Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The marker-end property specifies which marker graphic, if any, should be drawn at the endpoint of an SVG geometry — for example the last vertex of a , , or . It does not itself define the marker artwork; instead it points to a marker defined elsewhere in the SVG (a element) and controls whether that marker is attached to the final point of the shape. Because it targets the terminal point, it is commonly used to add arrowheads, dots, or other terminal decorations that visually indicate direction or termination.

When a marker is attached via marker-end, the marker element is positioned and oriented relative to the path’s tangent at that final vertex. This means the marker rotates to match the stroke direction at the end point so arrows or tips naturally follow the geometry. The visual result also interacts with the shape’s painting characteristics: the marker’s own fill and stroke interact with the host shape’s styling, and the host’s stroke width and color influence the overall appearance when markers are designed to match the stroke. See also stroke and fill for the paint properties that typically work together with markers.

marker-end is part of a group of marker positioning properties used to place markers at different vertex positions; its counterparts place markers at the start or midpoints of a geometry. Use these complementary properties to create consistent end-to-end decorations or repeating markers along a polyline. For reference to those companion properties, see marker-start and marker-mid. Together they let you treat markers as first-class decorative elements that can convey flow, direction, or semantics within vector graphics.

Because markers are separate SVG elements, they can be authored to scale, rotate, and inherit different parts of the host’s styling independently; this makes them flexible for both static artwork and programmatic graphics where shapes change dynamically. When animating a path or updating its geometry via script, the marker attached by marker-end will move and reorient with the path endpoint without needing separate DOM updates for the marker itself. If you want a concise reference for marker-related grouping or other marker-specific options, see marker.

Definition

Initial value: none
Applies to: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg
Inherited: yes
Computed value: as specified, but with <url> values made absolute
Animatable: yes
JavaScript syntax: object.style.markerEnd

Syntax

marker-end: none | url(#markerID) | inherit;

Values

none No marker is displayed at the end of the path. This is the default value.
url(#markerID)References a marker defined in the SVG <defs> section by its ID.
inheritInherits the value from the parent element.

Example

HTML

<div class="example">

    <svg viewBox="0 0 120 100" width="420" height="120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Curved path with arrow marker">

        <defs>

            <marker id="arrow" markerWidth="10" markerHeight="10" refX="10" refY="5" orient="auto" markerUnits="strokeWidth">

                <path d="M0,0 L10,5 L0,10 z" fill="#2b6cb0"></path>

            </marker>

        </defs>



        <path class="arrowed" d="M10 80 C 40 10, 65 10, 110 80" stroke="#2b6cb0" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>



        <path class="dashed-arrow" d="M10 20 L110 20" stroke="#e53e3e" stroke-width="4" fill="none" stroke-linecap="round"></path>

    </svg>

</div>

CSS

.example {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: #f7fafc;
}

.arrowed {
    /* Apply the SVG marker defined in the  by its ID */
    marker-end: url(#arrow);
}

.dashed-arrow {
    marker-end: url(#arrow);
    stroke-dasharray: 8 6;
}

/* optional hover feedback */
.arrowed:hover,
.dashed-arrow:hover {
    opacity: 0.85;
    transform-origin: center;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS marker-end property. Hover over a browser icon to see the version that first introduced support for this CSS property.