CSS paint-order Property

Definition and Usage

The paint-order property controls the order in which fill, stroke, and markers are drawn on SVG shapes and text. The default paints fill first, then stroke, then markers.

It is inherited. The initial value is normal. A thick stroke often looks better behind the fill—set paint-order: stroke fill for that.

CSS Syntax

List one, two, or three keywords. Listed layers paint first, in that order. Omitted layers keep their default relative order after them.

Property Values

How to Use paint-order

Use it when fill and stroke overlap and you care which layer sits on top.

1. Give the SVG shape or text a fill, stroke, and a visible stroke-width.
2. Leave the default, or set paint-order: stroke fill so the fill covers the inner half of the stroke.
3. Compare both orders side by side until the outline looks right.
4. Add markers only when the shape uses SVG markers.

Live Preview

Watch how a thick red stroke sits relative to the dark fill when you change the paint order.

CSS Examples

Each snippet focuses on paint-order. Fill and stroke are only there so you can see the order. Use Try It Yourself for a live editor.

<style>
  text {
    fill: #0f172a;
    stroke: #ef4444;
    stroke-width: 8px;
    paint-order: normal;
  }
</style>

<svg viewBox="0 0 280 80" width="280" height="80">
  <text x="8" y="55" font-size="48" font-weight="700">Hello</text>
</svg>

<style>
  text {
    fill: #0f172a;
    stroke: #ef4444;
    stroke-width: 8px;
    paint-order: stroke fill;
  }
</style>

<svg viewBox="0 0 280 80" width="280" height="80">
  <text x="8" y="55" font-size="48" font-weight="700">Hello</text>
</svg>

<style>
  text {
    fill: #0f172a;
    stroke: #ef4444;
    stroke-width: 8px;
    paint-order: stroke;
  }
</style>

<svg viewBox="0 0 280 80" width="280" height="80">
  <text x="8" y="55" font-size="48" font-weight="700">Hello</text>
</svg>

Key Takeaways