HTML Guide for border-width

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-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.