paint-order

Baseline 2024
Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

/* Normal */
paint-order: normal;

/* Single values */
paint-order: stroke; /* draw the stroke first, then fill and markers */
paint-order: markers; /* draw the markers first, then fill and stroke */

/* Multiple values */
paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
paint-order: markers stroke fill; /* draw markers, then stroke, then fill */

/* Global values */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;

If no value is specified, the default paint order is fill, stroke, markers.

When one value is specified, that one is painted first, followed by the other two in their default order relative to one another. When two values are specified, they will be painted in the order they are specified in, followed by the unspecified one.

Note: In the case of this property, markers are only appropriate when drawing SVG shapes involving the use of the marker-* properties (e.g., marker-start) and <marker> element. They do not apply to HTML text, so in that case, you can only determine the order of stroke and fill.

Values

normal

Paint the different items in normal paint order.

stroke, fill, markers

Specify some or all of these values in the order you want them to be painted in.

Formal definition

Initial value normal
Applies to text elements
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

paint-order = 
  normal                         |
  [ fill || stroke || markers ]

Examples

Reversing the paint order of stroke and fill

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>

CSS

text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}

Result

Reversing the paint order of stroke and fill using HTML

To control the fill and stroke order in HTML, you can use the -webkit-text-stroke-color and -webkit-text-stroke-width CSS properties.

HTML

<div>stroke in front</div>
<div class="stroke-behind">stroke behind</div>

CSS

div {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  padding-top: 10px;
  padding-bottom: 10px;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}

Result

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# PaintOrderProperty

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
paint-order 123
35–123Does not affect stroked HTML text, see bug 41372165
 123
79–123Does not affect stroked HTML text, see bug 41372165
 60 109
22–109Does not affect stroked HTML text, see bug 41372165
 11
8–11Does not affect stroked HTML text, see bug 168601
 123
35–123Does not affect stroked HTML text, see bug 41372165
 60 82
22–82Does not affect stroked HTML text, see bug 41372165
 11
8–11Does not affect stroked HTML text, see bug 168601
 27.0
3.0–27.0Does not affect stroked HTML text, see bug 41372165
 123
37–123Does not affect stroked HTML text, see bug 41372165

See also

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order