HTML Guide
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.
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.
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:
<!-- 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.
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.
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 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 to currentcolor.
- 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.
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>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;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.
Replace device-based media features with viewport-based features; use max-width instead of max-device-width.
max-device-width and min-device-width were removed from modern media queries because they target physical device dimensions, not the browser viewport. They fail on high‑DPI screens, resizable windows, and zoom scenarios. Use viewport-relative features like width, min-width, and max-width, which respond to the layout viewport and are supported across browsers. For device pixel density, prefer resolution (e.g., min-resolution: 2dppx) instead of -webkit-min-device-pixel-ratio. Keep breakpoints content-driven; pick sizes where your layout needs to adapt, not specific devices.
HTML Examples
Example causing the validator warning
<!doctype html>
<html lang="en">
<head>
<title>Deprecated Media Feature</title>
<style>
/* Deprecated: targets device width, not viewport */
@media only screen and (max-device-width: 480px) {
body {
background: pink;
}
}
</style>
</head>
<body>
<p>Deprecated media feature example.</p>
</body>
</html>Fixed example using viewport-based queries
<!doctype html>
<html lang="en">
<head>
<title>Viewport-Based Media Query</title>
<style>
/* Recommended: respond to viewport width */
@media (max-width: 480px) {
body {
background: pink;
}
}
/* Optional: high-DPI tweak using resolution */
@media (min-width: 481px) and (min-resolution: 2dppx) {
body {
background: lightblue;
}
}
</style>
</head>
<body>
<p>Fixed media feature example.</p>
</body>
</html>Replace device-based media features like min-device-width with viewport-based features such as min-width.
The min-device-width and max-device-width media features are deprecated in Media Queries Level 5 and are flagged by validators. They target the physical device screen, which is unreliable across modern devices and zoom settings. Use min-width/max-width to respond to the layout viewport instead. This aligns with responsive design best practices and works consistently with zoom, orientation changes, and different device pixel ratios.
Common replacements:
- @media (min-device-width: X) → @media (min-width: X)
- @media (max-device-width: X) → @media (max-width: X)
- If you were targeting pixel density, prefer resolution (e.g., min-resolution: 2dppx) or feature queries as needed.
HTML Examples
Example causing the warning
<!doctype html>
<html lang="en">
<head>
<title>Deprecated media feature example</title>
<style>
/* Deprecated: targets physical device width */
@media screen and (min-device-width: 768px) {
.card { padding: 24px; }
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>Fixed example (viewport-based)
<!doctype html>
<html lang="en">
<head>
<title>Viewport-based media queries</title>
<style>
/* Recommended: targets the layout viewport width */
@media (min-width: 768px) {
.card { padding: 24px; }
}
/* Optional: high-density displays */
@media (min-width: 768px) and (min-resolution: 2dppx) {
.card { border: 1px solid #ccc; }
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>The value on the display property is not valid.
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
The specified CSS filter is not a standard one, and may only work in some browsers.
font-display isn’t a CSS property, it’s a descriptor for use with the @font-face at-rule.
The value passed to the font-size property is invalid, probably missing the amount of px.
The font-size CSS property sets the size of the font, and this size can be expressed in different units, like em, % or px.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Font-size Example</title>
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p>This is an example of a paragraph with a font-size of 16px.</p>
</body>
</html>This issue is a false positive by the W3C validator, fixed in the latest versions of Nu Validator.
The value revert is indeed a valid value for the CSS property font-size.
A value specified for the font-size property in your CSS is not a valid CSS length or keyword.
The font-size property accepts values such as keywords (small, large), absolute and relative lengths (px, em, rem, pt), or percentages. Invalid values, like font-size: X;, are not recognized and trigger a validation error.
Common valid values for font-size:
- Keywords: small, medium, large, etc.
- Length units: 12px, 1em, 0.9rem, 10pt
- Percentages: 120%
Example with a valid value:
<p style="font-size: 16px;">This text uses a valid font size.</p>Example using a keyword:
<p style="font-size: large;">This text uses a valid keyword.</p>Full HTML example (valid):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Font Size Example</title>
</head>
<body>
<p style="font-size: 1.2em;">Valid font size using em unit.</p>
</body>
</html>Check that all font-size values use proper CSS units or accepted keywords to resolve the validation warning.
The font-stretch property in CSS defines the relative width of the font, and is used to make the text narrower or wider. The value bold is not a valid value for font-stretch. Instead, you should use the font-weight property to set the boldness of the font.
Here’s an example of how to use the font-weight property to set the text to bold:
<p style="font-weight: bold;">This text is bold.</p>Alternatively, you can use a CSS stylesheet to apply the font-weight property to multiple elements:
<style>
p { font-weight: bold; }
h1 { font-weight: bolder; }
</style>
<p>This text is bold.</p>
<h1>This heading is even bolder.</h1>The CSS font-style property is used to set the style of the font, such as normal, italic, or oblique. The value bold is not a valid value for font-style. Instead, you should use the font-weight property to set the boldness of the font. The valid values for font-weight are normal, bold, bolder, and lighter.
Here’s an example of how to use the font-weight property to set the text to bold:
<p style="font-weight: bold;">This text is bold.</p>Alternatively, you can use a CSS stylesheet to apply the font-weight property to multiple elements:
<style>
p { font-weight: bold; }
h1 { font-weight: bolder; }
</style>
<p>This text is bold.</p>
<h1>This heading is even bolder.</h1>The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
Here are examples of valid font-style values:
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;
/* Global values */
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;A common issue is trying to use font-style to define the size, when font-size should have been used instead, for example:
/* Invalid */
font-style: 1.2em;
/* Valid */
font-size: 1.2em;The W3C Validator error “CSS: “font-weight”: “X” is not a “font-weight” value” indicates that an incorrect value has been assigned to the font-weight CSS property. The font-weight property controls the boldness or weight of the font, but it only accepts specific values, not a measurement like pixels.
Accepted Values for font-weight:
- Keywords: normal, bold, bolder, lighter.
- Numeric Values: 100, 200, 300, 400 (equivalent to normal), 500, 600, 700 (equivalent to bold), 800, 900.
Fixing the Issue:
You need to replace the incorrect value with one of the accepted values for font-weight.
Incorrect CSS:
p {
font-weight: 20px; /* Invalid value */
}Corrected CSS:
If you want to use a lighter weight, you can choose one of the valid numeric values.
-
For a thin font weight:
p { font-weight: 100; /* Thin weight */ } -
For normal (default) font weight:
p { font-weight: 400; /* Normal weight */ } -
For bold font weight:
p { font-weight: bold; /* Bold keyword */ }
Example in HTML:
Here’s how you might use the corrected font-weight property in a simple HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Corrected font-weight values */
.thin {
font-weight: 100;
}
.normal {
font-weight: 400;
}
.bold {
font-weight: bold;
}
</style>
<title>Font Weight Example</title>
</head>
<body>
<p class="thin">This is thin font weight.</p>
<p class="normal">This is normal font weight.</p>
<p class="bold">This is bold font weight.</p>
</body>
</html>The font property should be used to set font-related attributes like font-style, font-variant, font-weight, font-size, line-height, and font-family. If you’re only trying to set font-weight, use the font-weight property instead.
Correct usage:
font-weight: 300; /* Correct syntax for setting font weight */If you want to set multiple font properties at once, use the font shorthand correctly:
font: 300 16px/1.5 "Helvetica", sans-serif; /* font-weight font-size/line-height font-family */Ensure that the font-family part is specified and valid.
The gap property in CSS does not accept auto as a valid value.
The gap property is used with CSS Grid and Flexbox layouts to define the spacing between grid tracks or flex items. Acceptable values for gap include length values such as px, em, %, or keywords such as normal. The value auto is not valid for the gap property; instead, use valid length units or the normal keyword.
Correct usage:
<div style="display: grid; gap: 16px;">
<div>Item 1</div>
<div>Item 2</div>
</div>Incorrect usage (produces a validation error):
<div style="display: grid; gap: auto;">
<div>Item 1</div>
<div>Item 2</div>
</div>For responsive or dynamic spacing, set the gap property to a valid length (e.g., 1rem, 10px, 5%) or use media queries to adjust spacing at different breakpoints.
The issue you’re encountering pertains to the use of the grid-column property in CSS, which is part of the CSS Grid Layout module. The grid-column property is typically used to specify how elements are placed along the grid columns in a grid layout.
The grid-column property is a shorthand for specifying both the starting grid line and the ending grid line for a grid item in order to define its horizontal position in the grid. The correct way to use it generally involves setting either a specific line number or a span value.
Syntax
The basic syntax for the grid-column property is:
grid-column: <start-line> / <end-line>;- <start-line>: The grid line where the item starts. This can be a line number, a named grid line, or a span keyword.
- <end-line>: The grid line where the item ends. Similarly, this can also be a line number, a named grid line, or use span to indicate spanning across a number of lines.
Common Usage
-
Specific Lines: Specify the starting and ending lines explicitly.
grid-column: 2 / 4;This would place the item starting from line 2 and ending before line 4.
-
Spanning Columns: Use the span keyword to define how many columns you want the item to span.
grid-column: 1 / span 2;This would start the item at line 1 and span two columns.
Issue with grid-column: 0
The value 0 is invalid for grid-column because grid lines in CSS Grid Layout are indexed starting from 1. Attempting to use 0 implies a non-existent line and therefore results in an invalid value error.
Correcting the Issue
-
Determine which grid line your item should start from and which line it should end on, using valid line numbers or span values.
-
Update your CSS to use valid grid lines:
/* Correct usage example: */ .grid-item { grid-column: 1 / span 2; }Here, the grid item starts at line 1 and spans across 2 columns.
Ensure that your grid layout is properly set up with the desired number of rows and columns so that you can appropriately set valid grid-column values.