CSS paint-order Property

What You’ll Learn

The paint-order property controls the order in which fill, stroke, and markers are painted on SVG graphics. It is especially useful when thick strokes and fills overlap.

Introduction

The paint-order property in CSS is used to control the order in which the fill, stroke, and markers of SVG graphics are painted.

This property is particularly useful when you want to ensure that certain parts of your SVG are rendered in a specific sequence, which can affect the visual appearance and layering of the graphic.

Definition and Usage

By default, browsers paint the fill first, then the stroke, then markers such as arrowheads on lines. With paint-order, you can change that sequence — for example, painting the stroke before the fill so the fill sits on top.

This is most common on inline or embedded SVG shapes and SVG text that use both fill and stroke properties.

📝 Syntax

The syntax for the paint-order property allows you to specify the order of painting for the fill, stroke, and markers.

element {
  paint-order: fill stroke markers;
}

Each of the values (fill, stroke, markers) can be used in any order and can be omitted if not needed.

Basic Example

svg rect {
  paint-order: stroke fill;
  stroke: blue;
  fill: lightblue;
  stroke-width: 5;
}

Syntax Rules

• Use normal for the default order: fill, stroke, markers.
• List one or more of fill, stroke, and markers in the order you want them painted.
• Omitted values keep their default relative order after the values you listed.
• The property applies to SVG shapes and SVG text with fill and/or stroke.
• Combine with stroke, fill, and stroke-width to see the visual effect clearly.
• Test in the browser — small order changes can look very different with thick strokes.

🎯 Default Value

The default value of the paint-order property is normal. This paints the fill first, then the stroke, and finally the markers.

💎 Property Values

The paint-order property accepts keyword values that control the painting sequence of SVG presentation.

When Does paint-order Matter?

paint-order becomes important whenever fill and stroke overlap on SVG content:

• Outlined SVG text — Use stroke fill so readable fill sits above a decorative stroke.
• Icons and badges — Control whether a bold border appears on top of or behind the fill.
• Charts and diagrams — Keep line markers visible relative to strokes and fills.
• Thick strokes — Change overlap when stroke-width is large enough to cover the fill center.

On shapes with only fill or only stroke, changing paint order may show little or no visible difference.

Examples Gallery

Start with the reference rectangle example, compare default and custom orders, style outlined text, and control marker layering.

<style>
  svg rect {
    paint-order: stroke fill;
    stroke: blue;
    fill: lightblue;
    stroke-width: 5;
  }
</style>

<h1>SVG Rectangle with Custom Paint Order</h1>
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100"></rect>
</svg>

<style>
  .default rect { paint-order: normal; }
  .custom rect { paint-order: stroke fill; }
  rect {
    stroke: #1d4ed8;
    fill: #bfdbfe;
    stroke-width: 10;
  }
</style>

<style>
  svg text {
    paint-order: stroke fill;
    stroke: #fbbf24;
    stroke-width: 6;
    fill: #ffffff;
    font-size: 48px;
  }
</style>

<svg width="320" height="90">
  <text x="10" y="60">Hello SVG</text>
</svg>

<style>
  .arrow-line {
    paint-order: stroke markers fill;
    stroke: #0f766e;
    stroke-width: 6;
    marker-end: url(#arrowhead);
  }
</style>

Understanding fill, stroke, and markers

Think of an SVG shape as three paint layers. fill colors the inside, stroke outlines the edge, and markers add decorations such as arrowheads on lines.

The default normal order is fill → stroke → markers. Use paint-order when you need a different stacking result without changing your colors or geometry.

/* Default */
svg path {
  paint-order: normal; /* fill, stroke, markers */
}

/* Common custom order */
svg text {
  paint-order: stroke fill;
}

💡 Best Practices