About This HTML Issue
The clip-path property defines a clipping region that controls which parts of an element are visible. It accepts a specific set of value types, and any deviation from the expected syntax will trigger a validation error. The validator checks your CSS against the specification and flags values that don’t conform.
The accepted value types for clip-path are:
-
none— No clipping (the default). -
Basic shape functions —
inset(),circle(),ellipse(),polygon(), andpath(). -
url()reference — Points to an SVG<clipPath>element, e.g.,url(#myClip). -
Geometry-box keywords —
border-box,padding-box,content-box,margin-box,fill-box,stroke-box,view-box. These can be used alone or combined with a basic shape.
Here are the most common mistakes that cause this error:
-
Missing units on length values. Writing
circle(50 at 50% 50%)is invalid because50needs a unit likepx,em, or%. The value0is the only length that doesn’t require a unit. -
Wrong separators. In
circle()andellipse(), the position coordinates afteratmust be separated by spaces, not commas. Inpolygon(), each coordinate pair uses a space between x and y, while commas separate the points from each other. -
Malformed
path()data. The SVG path string insidepath()must be wrapped in quotes, e.g.,path("M0 0 L100 0 L100 100 Z"). -
Typos or unsupported functions. Using a function name the specification doesn’t define, or misspelling one like
cirlce(), will trigger the error. -
Invalid
polygon()fill-rule. If you specify a fill rule inpolygon(), it must benonzeroorevenodd, followed by a comma before the first point.
Getting clip-path syntax right matters for standards compliance and cross-browser consistency. Browsers may silently ignore an invalid clip-path value, meaning your intended visual effect simply won’t appear — and you may not realize why. Validating your CSS catches these issues early.
Here is a quick reference for the correct syntax of each basic shape function:
-
circle(<radius> at <cx> <cy>)— Radius is a length or percentage. Position uses spaces, not commas. -
ellipse(<rx> <ry> at <cx> <cy>)— Both radii are lengths or percentages. -
inset(<top> <right> <bottom> <left> round <border-radius>)— Offsets are lengths or percentages. Theroundkeyword and border-radius are optional. -
polygon([<fill-rule>,] <x1> <y1>, <x2> <y2>, ...)— Space between x and y within a point; comma between points. -
path("<SVG path data>")— Path data string must be quoted.
Examples
Invalid clip-path values
<style>
/* Invalid: unitless radius; comma between position coordinates */
.clip-a {
clip-path: circle(50 at 50%, 50%);
}
/* Invalid: commas between x and y within each point */
.clip-b {
clip-path: polygon(0%, 0%, 100%, 0%, 100%, 100%, 0%, 100%);
}
/* Invalid: path data not wrapped in quotes */
.clip-c {
clip-path: path(M0 0 L100 0 L100 100 Z);
}
/* Invalid: misspelled function name */
.clip-d {
clip-path: cirlce(50% at 50% 50%);
}
</style>
Valid clip-path values
<style>
/* Valid circle: radius has a unit; position uses spaces */
.clip-a {
clip-path: circle(50px at 50% 50%);
}
/* Valid polygon: space between x and y, commas between points */
.clip-b {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
/* Valid path: SVG data is quoted */
.clip-c {
clip-path: path("M0 0 L100 0 L100 100 Z");
}
/* Valid inset with rounded corners */
.clip-d {
clip-path: inset(10% 20% 10% 20% round 8px);
}
/* Valid geometry-box keyword combined with a shape */
.clip-e {
clip-path: padding-box circle(50% at 50% 50%);
}
/* Valid: referencing an SVG clipPath */
.clip-f {
clip-path: url(#roundClip);
}
</style>
Full example with SVG <clipPath> reference
<!doctype html>
<html lang="en">
<head>
<title>Valid clip-path with SVG reference</title>
<style>
.clipped {
clip-path: url(#roundClip);
width: 200px;
height: 200px;
background: coral;
}
</style>
</head>
<body>
<svg width="0" height="0" aria-hidden="true">
<clipPath id="roundClip" clipPathUnits="objectBoundingBox">
<circle cx="0.5" cy="0.5" r="0.5"></circle>
</clipPath>
</svg>
<div class="clipped">Clipped element</div>
</body>
</html>When you encounter this validation error, carefully check the value reported in the error message. Compare it against the accepted syntax for the function you’re using, paying close attention to units, separators, and quoting. Small syntax differences — a comma where a space should be, or a missing unit — are the most frequent culprits.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.