Verificação HTML: CSS: “border-color”: “X” is not a “border-color” value.

Sobre este problema de CSS

The border-color property sets the color of an element’s four borders. When the W3C validator reports that a given value “is not a border-color value,” it means the value you provided doesn’t match any recognized CSS color format. Common mistakes that trigger this error include using a bare number like 0 instead of a color, misspelling a color keyword (e.g., grren instead of green), forgetting the # prefix on a hex code, or passing an invalid argument to a color function.

This matters because browsers handle invalid CSS values unpredictably. When a browser encounters an unrecognized border-color value, it discards the entire declaration and falls back to the inherited or initial value (typically currentcolor). This can lead to inconsistent rendering across browsers and make your design behave in unexpected ways. Writing valid CSS ensures predictable, cross-browser results and keeps your stylesheets maintainable.

Valid color formats

The CSS border-color property accepts any valid <color> value, including:

Named keywords — red, blue, transparent, currentcolor, etc.
Hexadecimal — #rgb, #rrggbb, #rgba, #rrggbbaa
rgb() / rgba() — rgb(255, 0, 0) or rgb(255 0 0 / 50%)
hsl() / hsla() — hsl(0, 100%, 50%) or hsl(0 100% 50% / 0.5)

You can also specify one to four color values to target individual sides (top, right, bottom, left), following the standard CSS shorthand pattern.

Examples

Invalid: bare number instead of a color

A number like 0 is not a valid color value and triggers the error:

<style>
  .box {
    border: 1px solid;
    border-color: 0;
  }
</style>

Invalid: misspelled color keyword

Typos in color names are not recognized by CSS:

<style>
  .box {
    border: 1px solid;
    border-color: grren;
  }
</style>

Invalid: hex code missing the `#` prefix

Without the leading #, the value is treated as an unknown keyword:

<style>
  .box {
    border: 1px solid;
    border-color: ff0000;
  }
</style>

Fixed: using a named color keyword

<style>
  .box {
    border: 1px solid;
    border-color: green;
  }
</style>

Fixed: using a hexadecimal value

<style>
  .box {
    border: 1px solid;
    border-color: #00ff00;
  }
</style>

Fixed: using `rgb()` functional notation

<style>
  .box {
    border: 1px solid;
    border-color: rgb(0, 128, 0);
  }
</style>

Fixed: using `hsl()` functional notation

<style>
  .box {
    border: 1px solid;
    border-color: hsl(120, 100%, 25%);
  }
</style>

Fixed: setting different colors per side

You can provide up to four valid color values to control each border individually (top, right, bottom, left):

<style>
  .box {
    border: 1px solid;
    border-color: red green blue orange;
  }
</style>

Fixed: using `transparent` or `currentcolor`

The special keywords transparent and currentcolor are also valid:

<style>
  .box {
    border: 1px solid;
    border-color: transparent;
  }

  .highlight {
    color: navy;
    border: 2px solid;
    border-color: currentcolor;
  }
</style>

If you’re unsure whether a value is a valid CSS color, check the MDN <color> data type reference for the complete list of accepted formats.