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.
It is documented as part of the Scalable Vector Graphics specification.
Syntax
/* Usage 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;
}
/* Syntax */
paint-order: normal;
paint-order: fill;
paint-order: stroke;
paint-order: markers;
/* Global values */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;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.
123+
60+
11+
123+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more