CSS paint-order Property

Description

The paint-order CSS property is used to specify the order in which different paint operations should be applied to an element. In modern web development, elements can be rendered using multiple techniques, such as 'fill' for solid colors, 'stroke' for outlines, and 'markers' for points on a path. By using paint-order, developers can control the sequence in which these paint operations are applied, affecting the rendering outcome. This property is particularly useful for fine-tuning the appearance of complex graphics and ensuring that certain visual effects are prioritized over others, enhancing the overall presentation of web content.

Initial value
normal
Applies to
text elements
Inherited
yes
Computed value
as specified
Animatable
discrete
JavaScript syntax
object.style.paintOrder

Syntax

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

Values

  • normalPaint the different items in normal paint order.
  • stroke, fill, markersSpecify some or all of these values in the order you want them to be painted in.

Example

<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>
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

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

Browser Support

The following table will show you the current browser support for the CSS paint-order property.

Desktop
Edge Chrome Firefox Opera Safari
173560228
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
3560228337

Last updated by CSSPortal on: 31st December 2023