HTML Validation

CSS: “padding-right”: X negative values are not allowed.

About This HTML Issue

The CSS property padding-right is used to set the padding space on the right side of an element. According to the CSS specification, padding values must be non-negative, meaning that negative values are not allowed for any of the padding properties.

To resolve the issue, remove the negative value. If you are trying to adjust the layout or spacing, consider using other CSS properties that allow negative values, such as margin. Here’s how you can fix this:

Example Before Fix

.example {
  padding-right: -9px; /* This is incorrect */
}

Example After Fix

.example {
  padding-right: 0; /* Set to zero or a positive value */
  /* If adjustment is needed, consider using margin */
  margin-right: -9px;
}

Explanation:

Padding: The padding-right property specifies the space between the content of the element and its border on the right side. This space cannot be negative.
Margin: If you’re trying to create an overlapping effect or reduce space externally, using margin-right with a negative value is permissible.

Evaluate the layout requirements and adjust the values appropriately, ensuring you respect the non-negative rule of padding properties.

Learn more:

Last reviewed: April 04, 2025

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Ready to validate your site?

Find Accessibility and HTML issues in your large sites, in seconds. Get your site scanned by Axe Core and W3C Validator with just one click.

Pro Trial Free Trial

Reading time

1 min read

Category

HTML Validation

Engine

W3C Validator

Last reviewed

April 04, 2025

Resources

Related W3C Validator Issues

CSS: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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>

CSS: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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>

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: “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”: The first argument to the “linear-gradient” function should be “to top”, not “top”.

Use the correct direction keyword syntax in CSS gradients: replace top with to top.

In CSS Images Level 4, the first argument of linear-gradient() should either be an angle (e.g., 180deg) or a direction using the to keyword (e.g., to top, to right). Older syntax like linear-gradient(top, ...) is no longer valid and triggers validator errors. Valid forms include: linear-gradient(to top, #fff, #000), linear-gradient(180deg, #fff, #000), or simply omit the direction to default to to bottom. Keep gradients in your CSS, not HTML attributes. The style attribute or a stylesheet can set the background or background-image with a valid gradient function.

HTML Examples

Example showing the issue

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Issue</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background: linear-gradient(top, #ffffff, #000000); /* invalid */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Fixed example (valid syntax)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Fixed</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* Option A: direction keyword */
        background: linear-gradient(to top, #ffffff, #000000);
        /* Option B: angle (equivalent) */
        /* background: linear-gradient(0deg, #ffffff, #000000); */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial