How CSS paint-order Controls Text Stroke and Fill

The CSS paint-order property allows developers to control the sequence in which the fill, stroke, and markers of a graphical element or text are drawn. By default, browsers paint text fill first and then apply the stroke on top of it, which often obscures the inner shape of glyphs and makes text difficult to read. By adjusting paint-order, you can draw the stroke beneath the fill, creating crisp, readable text outlines without clipping the font's design.

The Default Rendering Problem

When you apply a text stroke using -webkit-text-stroke or the SVG stroke property, browsers render the stroke centered along the path of each character's glyph outline. Half of the stroke width extends outward, while the other half extends inward over the character's interior.

Under the default rendering order (fill stroke markers), the browser paints the text fill first and overlays the stroke on top. With thicker strokes, the inward-facing portion of the outline covers the text fill completely, distorting thin fonts, sharp corners, and delicate counters.

How paint-order Modifies the Output

The paint-order property alters this drawing sequence. By setting the property to render the stroke first, the browser places the stroke behind the fill:

.outlined-text {
  font-size: 4rem;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-stroke: 8px #000000;
  paint-order: stroke fill;
}

In this configuration:

1. The browser draws the entire stroke (both inner and outer boundaries).
2. The browser paints the fill directly on top of the stroke.

Because the fill sits above the stroke, it covers the inner half of the outline. The final visible stroke appears strictly on the outside of the glyph, preserving the exact geometry and weight of the original typography.

Syntax and Values

The paint-order property accepts the keyword normal or a space-separated list of paint components (fill, stroke, and markers):

• paint-order: normal;: The default sequence. Components render in the order of fill, stroke, and markers.
• paint-order: stroke fill;: Paints the stroke first, followed by the fill. Unspecified components (like markers) are rendered last in their default relative order.
• paint-order: markers stroke fill;: Typically used in SVG elements containing path markers, ensuring markers sit at the very bottom layer.

Practical Advantages

Before widespread support for paint-order, web developers relied on complex workarounds to create outside strokes, such as layering multiple text elements using pseudo-elements (::before and ::after) or stacking multiple text-shadow declarations.

Using paint-order: stroke fill eliminates these workarounds. It works directly on a single HTML text element, retains native accessibility, and is fully supported across all modern web browsers.