`marker-end` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since January 2020.

The marker-end CSS property points to a marker that will be drawn on the last vertex of the element's path; that is, at its ending vertex. The marker must have been defined using an SVG <marker> element, and can only be referenced with a <url> value. The value of the CSS property overrides any values of the marker-end attribute in the SVG.

For many marker-supporting shapes, the first and last vertices are the same point: for example, the top left corner of a <rect>. In such shapes, if both the first and last markers are defined, two markers will be drawn at that point, though they may not face the same direction.

Note: The marker-end property will only have an effect for elements that can use SVG markers. See marker-end for a list.

Syntax

marker-end: none;
marker-end: url("markers.svg#arrow");

/* Global values */
marker-end: inherit;
marker-end: initial;
marker-end: revert;
marker-end: revert-layer;
marker-end: unset;

Values

none: This means no marker will be drawn at the last vertex of the element's path.
<marker-ref>: A <url> that refers to a marker defined by an SVG <marker> element, to be drawn at the last vertex of the element's path. If the URL reference is invalid, no marker will be drawn at the path's last vertex.

Formal definition

Initial value	none
Applies to	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an <code>svg</code>
Inherited	yes
Computed value	as specified, but with `<url>` values made absolute
Animation type	discrete

Formal syntax

marker-end = 
  none |
  <url>

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="triangle"
      viewBox="0 0 10 10"
      markerWidth="10"
      markerHeight="10"
      refX="1"
      refY="5"
      markerUnits="strokeWidth"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>
  <polyline
    id="test"
    fill="none"
    stroke="black"
    points="20,100 40,60 70,80 100,20" />
</svg>

polyline#test {
  marker-end: url("#triangle");
}

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # MarkerEndProperty

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`marker-end`	1	≤15	3	15	4	18	4	14	3.2	1.0	4.4	3.2
`none`	1	≤15	3	15	4	18	4	14	3.2	1.0	4.4	3.2