Newly available Helpful when paint-order improves stylesheet organization, fallback behavior, or cascade control.

paint-order

The paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
paint-order
123
123
60
11
123
11
Other
svg.global_attributes.paint-order

The paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted.
≤73
79
≤66
≤12
≤73
≤12
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (123)
Implementation note
  • Does not affect stroked HTML text, see bug 41372165
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (123)
Implementation note
  • Does not affect stroked HTML text, see bug 41372165
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (11)
Implementation note
  • Does not affect stroked HTML text, see bug 168601
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (123)
Implementation note
  • Does not affect stroked HTML text, see bug 41372165
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (11)
Implementation note
  • Does not affect stroked HTML text, see bug 168601

Syntax

CSS 
.outlined-text {
  -webkit-text-stroke: 3px black;
  paint-order: stroke fill;
  color: white;
}

Live demo

Stroke Fill order

CSS Stroke fill order demo.

PreviewFullscreen

Fill Stroke order

CSS Fill stroke order demo.

PreviewFullscreen

thickgetcharacter

CSS thickgetcharacter demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use paint-order to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links