HTML Guide

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>

Learn more:

Related W3C validator issues

CSS: “background-blend-mode”: X is not a “background-blend-mode” value.

background-blend-mode only accepts certain keywords as values, such as normal, multiply, screen, and others.

The background-blend-mode property in CSS specifies how background images and background colors blend together. Its value must be one or more blend mode keywords defined by CSS, for example, normal, multiply, screen, overlay, etc. Using an unrecognized value will generate a validation error.

Valid values include:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Example of an invalid value:

/* Invalid: 'X' is not a recognized value */
background-blend-mode: X;

Example of a valid value:

/* Valid: 'multiply' is a recognized blend mode */
background-blend-mode: multiply;

Example HTML with correct CSS property:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Blend Mode Example</title>
  <style>
    .blended-bg {
      background-image: url('image1.jpg'), url('image2.jpg');
      background-blend-mode: overlay;
    }
  </style>
</head>
<body>
  <div class="blended-bg" style="width:200px; height:200px;">
    Blended background
  </div>
</body>
</html>

Replace any invalid values for background-blend-mode in your CSS with one of the supported keywords.

CSS: “background”: “from” is not a valid color 3 or 6 hexadecimals numbers.

background CSS property has an invalid value; "from" is not recognized as a valid color or background value.

The background property in CSS can accept color names, hex codes, rgb/rgba values, or CSS keywords, but "from" is not valid. Sometimes this error can appear if using incorrect CSS gradient syntax, where "from" is not a recognized value.

Detailed Explanation

In standard HTML and CSS, a background can be set using:

Hex color codes, such as #fff or #ffffff
Named colors, such as red or blue
Functions, such as rgb(255,0,0) or linear-gradient(...)

If you wrote something like:

background: from #fff to #000;

background: "from";

neither is valid CSS.

To use gradients, use correct linear-gradient() or radial-gradient() syntax:

background: linear-gradient(to right, #fff, #000);

For a solid color:

background: #fff;

HTML Examples

Incorrect CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Incorrect CSS</title>
  <style>
    div {
      background: from #fff to #000; /* Invalid syntax */
    }
  </style>
</head>
<body>
  <div>Bad background</div>
</body>
</html>

Correct CSS (Gradient):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Correct CSS Gradient</title>
  <style>
    div {
      background: linear-gradient(to right, #fff, #000);
    }
  </style>
</head>
<body>
  <div>Good background</div>
</body>
</html>

Correct CSS (Solid Color):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Correct CSS Color</title>
  <style>
    div {
      background: #fff;
    }
  </style>
</head>
<body>
  <div>White background</div>
</body>
</html>

Always use a valid color value or gradient function for the background property.

CSS: “background-image”: X is not a “background-image” value.

background-image attribute values must use valid CSS syntax.

The background-image property in CSS expects the value to be a valid image reference, such as none, url("image.png"), gradients, or inherit.

Correct CSS Syntax:

background-image: url("background.jpg");

Correct usage in HTML (inline style):

<div style="background-image: url('background.jpg');">
  Content here
</div>

Incorrect usage (missing url() or filename only):

<div style="background-image: background.jpg;">
  Content here
</div>

Correct usage in a <style> block:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Background Image Example</title>
    <style>
      .banner {
        background-image: url("banner.png");
      }
    </style>
  </head>
  <body>
    <div class="banner">Welcome</div>
  </body>
</html>

Always wrap the image path with the url() function and use quotes for paths containing special characters.

CSS: “background”: X is not a “background-color” value.

There’s an invalid value for the background property in your CSS. The W3C HTML Validator has attempted to match the value to a background color, without success.

Here’s how to resolve this issue:

Identify the Correct CSS Configuration: The background property in CSS can take various forms, such as a color, an image, or a combination of background components. Ensure you provide a valid value.
Correct the Value: If you meant to set a background color, use a valid color format (e.g., hexadecimal, RGB, RGBA, named color, etc.).

Valid CSS Examples:

Using a named color:
```
.example {
  background: blue;
}
```
Using a hexadecimal color:
```
.example {
  background: #00ff00;
}
```

Using an RGB color:

.example {
  background: rgb(255, 0, 0);
}

Using an RGBA color (with transparency):

.example {
  background: rgba(255, 0, 0, 0.5);
}

Setting an image as background:

.example {
  background: url('image.jpg');
}

Combining multiple background properties:

.example {
  background: url('image.jpg') no-repeat center/cover;
}

CSS: “border-radius”: X is not a “border-radius” value

The value specified for the border-radius CSS property is not valid.

The border-radius property expects a valid length or percentage value (like 5px, 10%, etc.). Using a CSS variable only works if the variable is properly defined in a CSS rule somewhere in the document, and the HTML is interpreted by a browser that supports CSS custom properties.

For example, if you write:

<div style="border-radius: var(--my-border-radius);"></div>

but never define --my-border-radius, it triggers an error.

Solution:

Define the CSS variable before using it, or use a fixed value instead.

Example 1: Using a fixed value

<div style="border-radius: 8px;"></div>

Example 2: Defining the variable in CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Variable Border Radius Example</title>
    <style>
      :root {
        --my-border-radius: 8px;
      }
      .rounded {
        border-radius: var(--my-border-radius);
      }
    </style>
  </head>
  <body>
    <div class="rounded">Border radius via variable</div>
  </body>
</html>

Using custom properties in inline style attributes is valid in modern browsers if the variable is defined, but some validators may flag it if they can’t resolve the variable. For best validator compatibility, use static, valid CSS values.

CSS: “border-style”: “thick” is not a “border-style” value.

border-style does not accept thick as a value; it should be set to values like solid, dashed, or dotted, while thick is a valid border-width value.

The CSS property border-style determines the style of the border, such as whether it is solid, dashed, double, etc.

Acceptable values include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. The keyword thick is not valid for border-style; instead, it can be used with border-width to indicate a thicker border.

To achieve a thick solid border, set border-style to solid and border-width to thick.

Incorrect HTML Example:

<div style="border-style: thick;"></div>

Correct HTML Example:

<div style="border-style: solid; border-width: thick;"></div>

Or, if you want to specify a custom thickness:

<div style="border-style: solid; border-width: 5px;"></div>

The combination ensures that the border both displays in a solid style and is rendered at the desired thickness.

CSS: “border”: Too many values or values are not recognized.

CSS
border

The border property in your CSS has too many values or uses incorrect values.

According to the CSS specification, the shorthand border property accepts the following, in any order: border-width, border-style, and border-color, but each should occur at most once and be a valid value.

Common mistakes:

Adding extra values, such as two widths or two colors.
Using an invalid border-style.
Misspelling keywords.

Correct syntax:

selector {
  border: border-width border-style border-color;
}

border-width: e.g., 1px, thin, 0
border-style: e.g., solid, dashed, none
border-color: e.g., #ff0, red, rgb(255,0,0)

Valid examples:

/* Valid shorthand: width, style, color */
div {
  border: 2px solid black;
}

p {
  border: thin dashed #00f;
}

section {
  border: 0 none;
}

Make sure your border property contains at most one valid value each for width, style, and color, and not more than three total.

CSS: “border-width”: X is not a “border-width” value.

border-width in CSS accepts specific keywords (thin, medium, thick) or valid length values (px, em, etc.).

The border-width property controls the thickness of a border around an element, and only accepts values such as length units (like 2px, 0.5em, 3pt) or the keywords: thin, medium, and thick. Using any other value (such as an unsupported unit or a misspelled keyword) will generate a validator error. Check your CSS for border widths that use incorrect or unsupported values.

Example of incorrect usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invalid border-width Example</title>
  <style>
    .box {
      border-style: solid;
      border-width: large;  /* invalid: "large" is not allowed */
    }
  </style>
</head>
<body>
  <div class="box">Invalid border-width</div>
</body>
</html>

Example of correct usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid border-width Example</title>
  <style>
    .box {
      border-style: solid;
      border-width: 5px;  /* valid: uses "px" unit */
    }
  </style>
</head>
<body>
  <div class="box">Valid border-width</div>
</body>
</html>

Permitted values for border-width include:

Length units: px, em, rem, pt, etc.
Keywords: thin, medium, thick

Example with keywords:

<div style="border-style: solid; border-width: thick;">
  Thick border with keyword
</div>

Replace any invalid value with a valid length or one of the accepted keywords to resolve the validation error.

CSS: “box-shadow”: X is not a “box-shadow” value.

The value provided for the box-shadow CSS property is invalid.

The box-shadow property requires a valid set of length, color, and optionally other parameters to describe shadow effects on elements. A typical box-shadow value must specify horizontal and vertical offsets, and may include blur radius, spread radius, and color, in that order. Syntax errors such as missing units, wrong order, or invalid keywords will trigger validation errors.

Correct syntax:

box-shadow: <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?;

<offset-x> and <offset-y> are required and must use valid CSS length units (like px, em, rem).
<blur-radius>, <spread-radius>, and <color> are optional.
Multiple shadows can be comma-separated.

Example of invalid usage:

<div style="box-shadow: 10 10;">Invalid box-shadow</div>

In this example, the values 10 10 are missing units (px).

Example of a valid, W3C-compliant usage:

<div style="box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);">
  Valid box-shadow
</div>

Example with multiple shadows:

<div style="box-shadow: 2px 2px 5px #888, 0px 0px 10px 2px blue;">
  Multiple shadows example
</div>

Always ensure each length value has a correct unit, colors are valid, and values are in the correct order to pass validation.

CSS: “cursor”: “hand” is not a “cursor” value.

Replace the cursor value hand with the standard pointer to indicate a clickable item, as the CSS cursor: hand is not valid in modern web standards.

CSS specifies the cursor property to change the appearance of the mouse pointer over an element, to indicate the interaction type. The value hand was utilized in old versions of Internet Explorer to denote a clickable link or button. However, the CSS specification uses pointer as the standard value to imply that an area is interactive or clickable, such as hyperlinks or buttons.

If you’re using cursor: hand, it will not be recognized by browsers following the current CSS standard, leading to the W3C Validator warning about an invalid value. To resolve this issue, simply replace hand with pointer. This change makes sure that the appearance of the cursor is displayed according to the intended behavior across all modern browsers and platforms.

Example

Invalid CSS:

button {
  cursor: hand; /* Invalid value */
}

Valid CSS:

button {
  cursor: pointer; /* Correct standard value */
}

In both code snippets, the CSS is applied to a button element. By using cursor: pointer, the mouse pointer turns into a hand icon, indicating that the button is clickable and adheres to the W3C standards.