CSS clip-rule Property

Description

The clip-rule property in CSS is used to determine how the interior of a shape or path is filled when the shape has overlapping or complex paths. It is particularly relevant in SVG graphics, though it can also be applied to CSS shapes in combination with the clip-path property. Essentially, it defines the “rule” that determines which parts of a path are considered inside the shape and which are outside, affecting the rendering of filled areas.

When a shape has overlapping segments, holes, or self-intersections, the browser needs a way to decide which regions should be filled. This is where clip-rule comes into play. It doesn’t change the shape itself; instead, it affects how the interior region of the shape is calculated.

Two key rules are commonly applied:

Nonzero rule – This rule counts the direction of each path segment (clockwise or counterclockwise) to determine whether a point is inside the shape. If a line drawn from a point to infinity crosses the path more times in one direction than the other, the point is considered inside. This tends to fill more areas in complex overlapping paths.
Even-odd rule – This rule counts the total number of times a line from the point to infinity crosses the path. If the count is odd, the point is inside; if even, it’s outside. This often creates “holes” in overlapping shapes where paths intersect an even number of times.

Use cases:

Complex SVG shapes: When an SVG path contains overlapping lines or loops, clip-rule helps ensure the correct areas are filled or clipped.
Clip-path effects: When using clip-path to create complex shapes for HTML elements, clip-rule can control which parts of the element remain visible or hidden.
Masking and clipping layers: In graphics-intensive web designs, clip-rule determines how multiple overlapping shapes interact visually.

Example Concept (without code): Imagine a doughnut shape created by two overlapping circles: one bigger and one smaller inside it. Using the nonzero rule might fill the entire outer circle, including the inner circle, while the even-odd rule would leave the inner circle transparent, correctly creating a “hole.”

Definition

Initial value: nonzero
Applies to: Applies to SVG graphics elements
Inherited: yes
Computed value: as specified
Animatable: no
JavaScript syntax: object.style.clipRule

Syntax

clip-rule = nonzero | evenodd

Values

nonzero
This value determines the "insideness" of a point by drawing a ray from that point to infinity in any direction and examining the places where a segment of the shape crosses the ray.
- It counts how many times the path crosses the ray from left to right and subtracts the number of times it crosses from right to left.
- If the result is zero, the point is outside; if it is non-zero, the point is inside.
evenodd
This value determines the "insideness" of a point by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.
- If this number is odd, the point is inside.
- If this number is even, the point is outside.

Example

HTML

<div class="wrap">

  <h1>SVG clip-rule: nonzero vs evenodd</h1>

  <div class="examples">

    <figure class="example">

      <figcaption>Nonzero (default)</figcaption>

      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="svg-sample">

        <defs>

          <linearGradient id="g1" x1="0" x2="1">

            <stop offset="0" stop-color="#ff7e79" />

            <stop offset="1" stop-color="#ffd27f" />

          </linearGradient>

          <clipPath id="clipNonzero">

            <circle cx="50" cy="50" r="36" />

            <circle cx="68" cy="50" r="16" />

          </clipPath>

        </defs>

        <rect width="100" height="100" fill="url(#g1)" />

        <g clip-path="url(#clipNonzero)">

          <rect x="0" y="0" width="100" height="100" fill="#4aa3ff" />

          <circle cx="42" cy="50" r="6" fill="#ffffff" />

        </g>

      </svg>

    </figure>



    <figure class="example">

      <figcaption>Even-odd</figcaption>

      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="svg-sample">

        <defs>

          <linearGradient id="g2" x1="0" x2="1">

            <stop offset="0" stop-color="#b794ff" />

            <stop offset="1" stop-color="#7af5d1" />

          </linearGradient>

          <clipPath id="clipEvenodd">

            <circle cx="50" cy="50" r="36" />

            <circle cx="68" cy="50" r="16" />

          </clipPath>

        </defs>

        <rect width="100" height="100" fill="url(#g2)" />

        <g clip-path="url(#clipEvenodd)">

          <rect x="0" y="0" width="100" height="100" fill="#ffdd57" />

          <circle cx="42" cy="50" r="6" fill="#000000" />

        </g>

      </svg>

    </figure>

  </div>

</div>

CSS

.wrap {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
  color: #333;
}

h1 {
  font-size: 18px;
  margin: 0 0 12px 0;
}

.examples {
  display: flex;
  gap: 24px;
  align-items: center;
}

.example {
  text-align: center;
}

.example figcaption {
  margin-bottom: 8px;
  font-size: 14px;
}

.svg-sample {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  background: #fff;
  border: 1px solid #e6e6e6;
}

/* Apply clip-rule to the shapes inside each clipPath */
#clipNonzero circle {
  clip-rule: nonzero;
}

#clipEvenodd circle {
  clip-rule: evenodd;
}

Result

Editor

Browser Support

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