paint-order
An SVG-related property that controls whether an element's fill or stroke is drawn first. This is useful for preventing a thick stroke from obscuring the fill of a shape or text.
Quick example
path {
stroke-width: 10px;
stroke: black;
fill: white;
/* Draws the fill ON TOP of the stroke so the fill stays the correct size */
paint-order: stroke fill;
}Quick facts
Initial value
normalInherited
Yes
Applies to
text elements
Animation type
discrete
Values
normalfillstrokemarkers paint-order Browser Support
Newly available Since 2024 87% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
123+
60+
11+
123+