The paint-order property controls the painting order of fill, stroke, and SVG markers on graphical and text elements. Especially useful for flipping the order so stroke renders beneath fill — yields cleaner outlined typography without duplicate elements..heading {
paint-order: stroke;
}.outlined-text {
-webkit-text-stroke: 4px black;
paint-order: stroke fill markers;
}normalDefault order: fill → stroke → markers.fillFill is painted first at this position. Omitted operations follow in normal order.strokeStroke is painted at this position. Common: paint-order: stroke — fill paints over stroke.markersSVG markers (marker-start/mid/end) are painted at this position.SVG 2Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
