CSS marker-start 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-start property controls which marker graphic (usually an SVG element) is attached to the starting point of a stroked geometric shape. It is used to specify a decorative or functional glyph that visually anchors the beginning of a path, line, polyline, or similar SVG geometry; the marker is rendered in relation to the geometry's first vertex or start point and follows the drawing direction of that segment. As a presentation-level property it ties a separate marker resource to an element without altering the element’s underlying geometry — the marker is a painted decoration rather than part of the element’s box model.

Markers applied via marker-start are handled during the painting phase and therefore interact with the element’s stroke and coordinate system rather than the document’s layout. The marker graphic itself is positioned, rotated, and scaled according to the geometry and the marker’s own reference coordinates so that it visually aligns with the path direction; this means the final appearance depends on the path’s direction, the marker definition, and how the marker’s local coordinate system maps onto the painted stroke. Because markers are separate graphical objects, you can design them to pick up contextual styling (for example by referencing the stroke or fill of the marked element) or to be entirely independent, depending on how the marker is authored.

In practice marker-start is commonly used together with marker-mid and marker-end to create consistent decorations along a whole path (start, interior vertices, and end). It also relates to the element’s stroke characteristics — see stroke — and will visually follow transformations applied to the shape, such as those from transform, because markers are positioned and oriented in the transformed coordinate space. Importantly, using marker-start does not change layout or flow; it augments the visual rendering of the graphical element.

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.markerStart

Syntax

marker-start: none | <uri> [ <orient> ]?;

Values

none No marker is drawn at the start of the path.
<uri>A reference to an SVG <marker> element. The URI typically points to an ID of a marker defined elsewhere in your SVG.
<orient>
(optional) – Specifies the orientation of the marker. Possible values:
- auto – The marker rotates to match the direction of the path at the start point.
- <angle> – A specific angle (e.g., 45deg) at which to rotate the marker.

Example

HTML

<div class="wrapper">

  <svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">

    <defs>

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

        <circle cx="5" cy="5" r="3" fill="#1e88e5" />

      </marker>

      <marker id="arrow-end" markerWidth="12" markerHeight="12" refX="0" refY="6" orient="auto" markerUnits="strokeWidth">

        <path d="M0,0 L12,6 L0,12 z" fill="#e53935" />

      </marker>

    </defs>



    <path class="line arrowed" d="M20 30 C80 10, 140 50, 260 30" stroke-width="6" fill="none" />

    <path class="line arrowed alt" d="M20 80 L260 80" stroke-width="6" fill="none" />

  </svg>

  <p class="caption">CSS marker-start and marker-end applied via CSS</p>

</div>

CSS

.wrapper {
  max-width: 700px;
  margin: 20px auto;
  font-family: system-ui, Arial, sans-serif;
  text-align: center;
}

svg {
  width: 100%;
  height: 140px;
  display: block;
  background: #fbfbff;
  border-radius: 8px;
}

.line {
  stroke: #666;
  transition: stroke 0.15s ease;
}

.line.arrowed {
  stroke: #1e88e5;
  marker-start: url(#arrow-start);
  marker-end: url(#arrow-end);
}

.line.arrowed.alt {
  stroke: #e53935;
  marker-start: url(#arrow-end);
  marker-end: none;
}

.caption {
  margin-top: 8px;
  color: #333;
  font-size: 14px;
}

Result

Editor

Browser Support

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