HTML Guide for clip-path

CSS: “clip-path”: X is not a “clip-path” value.

Invalid value supplied to the CSS clip-path property.

The clip-path property defines a clipping region for an element and accepts specific value types: the none keyword, basic shapes (e.g., inset(), circle(), ellipse(), polygon()), the path() function (SVG path data), a reference to an external SVG <clipPath> via url(#id) or url("..."), and the geometry-box keywords (border-box, padding-box, content-box, margin-box, fill-box, stroke-box, view-box) optionally combined with a shape. Common validator errors come from missing units, malformed functions, using commas where spaces are required, mixing percentage and unitless values incorrectly, or using unsupported syntax. Examples:

inset(<top> <right> <bottom> <left> [round <radius>])
circle(<radius> at <position>) where radius must be a length or percentage (not unitless).
ellipse(<rx> <ry> at <position>)
polygon([<fill-rule>,] <x y> ... ) with coordinates as lengths/percentages separated by spaces, points separated by commas.
path("M ... Z") SVG path data in quotes.
url(#clipId) referring to an existing SVG <clipPath id="clipId">.

HTML Examples

Example causing the validator error

<!doctype html>
<html lang="en">
<head>
  <title>Invalid clip-path</title>
  <style>
    /* Invalid: unitless radius and wrong separators */
    .bad {
      clip-path: circle(50 at 50%,50%);
    }

    /* Invalid: polygon uses commas between coordinates instead of spaces */
    .bad2 {
      clip-path: polygon(0%,0%, 100%,0%, 100%,100%, 0%,100%);
    }
  </style>
</head>
<body>
  <div class="bad">Bad circle</div>
  <div class="bad2">Bad polygon</div>
</body>
</html>

Fixed example with valid values

<!doctype html>
<html lang="en">
<head>
  <title>Valid clip-path</title>
  <style>
    /* Valid: radius has a unit; position uses 'at' with spaced coordinates */
    .good {
      clip-path: circle(50px at 50% 50%);
    }

    /* Valid: polygon points use spaces within a point, commas between points */
    .good2 {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    /* Valid: referencing an SVG clipPath by ID */
    .svg-ref {
      clip-path: url(#roundClip);
    }
  </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="good">Good circle</div>
  <div class="good2">Good polygon</div>
  <div class="svg-ref">SVG referenced clip</div>
</body>
</html>