CSS paint-order Property

The paint-order property determines the order in which the visible parts of a vector shape are drawn — for example the fill, the stroke, and any markers — so it changes which parts cover others when those parts overlap. It is a visual layering control only: it does not alter the geometric path, bounding box, hit testing, event targets, or document order. Because it operates on the internal painting sequence of an element, you can get different visual results without changing markup or duplicating geometry.

One common practical use is to resolve unwanted overlap between a shape's outline and its interior artwork: by changing the internal painting sequence you can paint the stroke beneath the fill to produce an inset look, or paint the stroke last to create a crisp outline that sits above the fill. This can be useful for thick strokes, complex joins, or when fills include patterns or gradients that you don't want obscured by the stroke. The property is especially relevant when working with SVG shapes and path markers where the order of stroke, fill, and markers visibly matters; consider how it interacts with the individual presentation properties like fill and stroke when designing the final appearance.

Because paint-order only affects painting order, it interacts with blending and effects in ways that can be important for final rendering. If you use blending controls such as mix-blend-mode, or apply graphical effects via filter, the result can change substantially depending on which part of the element is painted first. Likewise, overall transparency is handled differently depending on painting order — see opacity for how translucency compositing works. Note that this is distinct from how elements are stacked relative to each other in the document: stacking/ordering between elements is controlled by mechanisms like z-index and can be affected by context-creating properties such as transform, whereas paint-order is local to the element’s own parts.

In practice, changing painting order is a lightweight and expressive tool for designers who need precise visual layering without adding extra DOM or duplicating shapes. However, because it affects how browsers composite an element’s content, care is warranted: complex combinations of painting-order changes with filters, blend modes, or frequent dynamic updates can increase the work the renderer must do and may have performance implications. When you need persistent, predictable layering for complex visuals, sometimes splitting artwork into separate elements (and controlling inter-element stacking) is a clearer alternative than relying solely on internal painting order.