CSS fill-rule Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The fill-rule property determines how the interior of a vector path is decided when the path is complex — for example, when it contains multiple subpaths, self-intersections, or nested contours. It doesn’t change the geometry of the path itself; instead it controls which regions are considered "inside" for the purposes of painting the fill. This matters whenever you want holes, overlaps, or interlocking shapes to render in a particular way without altering the underlying path coordinates.

There are two commonly used algorithms to resolve the interior vs. exterior of a path: one relies on counting how many times a ray from a test point crosses the path and uses the direction of those crossings to accumulate a winding number, while the other uses a simple parity test that flips inside/outside each time the ray crosses the path. In practical terms, that means identical-looking sets of subpaths can produce either a hole or a filled overlap depending on which algorithm is in effect. A simple concentric-circle example illustrates the effect: with one algorithm the inner circle becomes a hole while with the other it might be treated as an additional filled region unless you specifically arrange the path directions.

Because fill-rule only affects filling, it interacts with other painting-related properties and operations. It works together with the element’s fill color or paint, and does not alter how the stroke is drawn (stroke rendering follows the outline regardless of the fill rule). The same logical rules are relevant when a path is used as a clipping or masking shape, where the chosen rule determines the clip region; this mirrors how the clip-rule behaves for clipping paths.

In practice, choose the rule that matches how your shapes were constructed: if shapes were created by boolean operations or by tools that orient subpaths consistently, one rule will often produce the intended holes automatically; if paths are assembled from independent contours with arbitrary winding directions, the other rule can be simpler to reason about. When authoring complex icons or SVG artwork, being explicit about the intended rule (or normalizing subpath directions) avoids surprises across renderers and makes hit-testing and accessibility behaviors more predictable.

Definition

Initial value: nonzero
Applies to: SVG shapes and text content elements
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.fillRule

Syntax

fill-rule: nonzero | evenodd | inherit | initial | unset

Values

nonzero
This is the default value. It uses the non-zero winding rule to determine the "insideness" of a point in a path. Essentially, it counts how many times a path winds around a point:
- If the result is non-zero, the point is considered inside and filled.
- If the result is zero, the point is considered outside and not filled.
evenoddThis uses the even-odd rule. A point is filled if a ray drawn from that point crosses the path an odd number of times; otherwise, it is left unfilled. This is simpler and often produces visually different results for complex, self-intersecting paths.
inherit The element inherits the fill-rule from its parent element.
initial Resets the property to its default value (nonzero).
unsetActs as either inherit or initial, depending on whether the property is naturally inheritable.

Example

HTML

<div class="examples">

    <figure class="example nonzero">

        <svg viewBox="0 0 200 200" width="200" height="200" aria-hidden="true">

            <path class="shape" d="M10 10 H190 V190 H10 Z M50 50 H150 V150 H50 Z" />

        </svg>

        <figcaption>fill-rule: nonzero</figcaption>

    </figure>



    <figure class="example evenodd">

        <svg viewBox="0 0 200 200" width="200" height="200" aria-hidden="true">

            <path class="shape" d="M10 10 H190 V190 H10 Z M50 50 H150 V150 H50 Z" />

        </svg>

        <figcaption>fill-rule: evenodd</figcaption>

    </figure>

</div>

CSS

.examples {
    display: flex;
    gap: 24px;
    align-items: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.example {
    text-align: center;
}

.shape {
    fill: #ff8c00;
    stroke: #333;
    stroke-width: 2;
}

.nonzero .shape {
    fill-rule: nonzero;
}

.evenodd .shape {
    fill-rule: evenodd;
}

figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS fill-rule property. Hover over a browser icon to see the version that first introduced support for this CSS property.