CSS marker-start property

Definition and Usage

marker-start The property points to a marker that will be drawn at the first vertex of the element path.

The shape of the marker is defined by the SVG <marker> element and referenced by the url() value.

CSS marker-start The value of the property overrides the value of the marker-start property in SVG.

Instance

Example 1

Points to a marker (arrow) that will be drawn at the first vertex of the element path:

#test {
  marker-start: url(#arrow);
}

Try It Yourself

Example 2

Points to a marker (circle) that will be drawn at the first vertex of the element path:

#test {
  marker-start: url(#circle);
}

Try It Yourself

CSS Syntax

marker-start: none;url|initial|inherit;

Property value

Value Description
none Default value. No marker is drawn at the first vertex of the path.
url Reference to the URL of the marker defined by the SVG <marker> element.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Browser Support

The numbers in the table indicate the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
80 80 72 13.1 67

Related Pages

Tutorial:SVG Symbols

Reference:CSS marker property

Reference:CSS marker-mid property

Reference:CSS marker-end property