HTML Guide
The value interpreted as a color in the box-shadow
CSS property is invalid.
box-shadow
is used to apply shadow effects to elements. Its syntax includes horizontal and vertical offsets, blur and spread radii, and a color value. If the color value is invalid, the validator will report an error like “X is not a ‘color’ value”.
Valid box-shadow
syntax:
box-shadow: <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? <inset>?;
-
<color>
is optional but highly recommended; if omitted, it defaults tocurrentcolor
. -
Valid color values include names (e.g.,
red
), hexadecimal codes (e.g.,#000
), RGB/RGBA, HSL/HSLA formats.
Example of incorrect CSS (missing or invalid color):
<div style="box-shadow: 2px 4px 8px;">Shadow without color</div>
<div style="box-shadow: 2px 4px 8px banana;">Shadow with invalid color</div>
Example of correct HTML with valid box-shadow
color values:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Shadow Example</title>
<style>
.shadow {
box-shadow: 2px 4px 8px #000; /* Black shadow */
}
.shadow2 {
box-shadow: 2px 4px 8px rgba(0,0,0,0.3); /* Semi-transparent */
}
.shadow3 {
box-shadow: 2px 4px 8px blue; /* Named color */
}
</style>
</head>
<body>
<div class="shadow">Box with shadow</div>
<div class="shadow2">Box with semi-transparent shadow</div>
<div class="shadow3">Box with blue shadow</div>
</body>
</html>
Always specify a valid color value in box-shadow
to resolve this validation issue.
Learn more:
Related W3C validator issues
This W3C Validator issue indicates that the value assigned to the CSS border property is invalid. The border property in CSS is used to specify the width, style, and color of an element’s border, and these values must be appropriately defined.
To resolve this issue, make sure you define the border property using valid values for border width, border style, and border color. Below is the correct syntax for setting a border:
selector {
border: 1px solid black; /* width, style, color */
}
If you inadvertently set the border property to an incorrect or undefined value, such as undefined, it will trigger this validation issue.
Incorrect Example:
<div style="border: undefined;"></div> <!-- This will cause a validation error -->
Correct Example:
To correct this, replace undefined with a valid CSS border definition. For example:
<div style="border: 1px solid black;"></div>
Breakdown:
- 1px is the border width.
- solid is the border style.
- black is the border color.
More Examples:
Here are a few more valid examples with different border styles:
-
Dotted border:
<div style="border: 2px dotted red;"></div>
-
Dashed border:
<div style="border: 3px dashed blue;"></div>
-
Double border:
<div style="border: 4px double green;"></div>
Additionally, you can define border properties separately:
selector {
border-width: 1px;
border-style: solid;
border-color: black;
}
Summary:
Ensure your border property has valid width, style, and color values. Avoid using placeholders like undefined in your CSS properties. This will resolve the W3C Validator issue and render your border as expected in your HTML document.
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.
The color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.
Example Fix
Invalid CSS
The following snippet is invalid because 0 is not a valid color value:
<style>
.example {
color: 0;
}
</style>
Valid CSS
To fix it, use a valid color value. Below are examples using different types of color values:
Color Keyword
<style>
.example {
color: black;
}
</style>
Hexadecimal Color
<style>
.example {
color: #000000;
}
</style>
RGB Color
<style>
.example {
color: rgb(0, 0, 0);
}
</style>
RGBA Color
<style>
.example {
color: rgba(0, 0, 0, 0.5);
}
</style>
The hexadecimal value for the color CSS property is not valid. It needs to have either 3 or 6 hexadecimal digits.
The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.
This property accepts colors in different formats, one of them being hexadecimal values. For example a pure red color can be expressed either with 3 hexadecimal digits or 6 hexadecimal digits:
color: #F00;
color: #FF0000;