Skip to main content

HTML Guide

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.

Learn more:

Related W3C validator issues