CSS: “border-style”: X is not a “border-style” value.

The CSS border-style property only accepts line style keywords, and the quoted value isn't one of them, so browsers ignore the declaration.

border-style takes one to four values, one per side of the box, and each must be one of none, hidden, dotted, dashed, solid, double, groove, ridge, inset or outset. The global keywords inherit, initial, revert and unset work as a single value. A made-up word such as disable or off, a width such as thick or 2px, or a color such as red all produce this message, and the validator quotes the first value it doesn't recognize.

When the browser drops the declaration, the element keeps whatever border style it would have had without it. If another rule already gives it a solid border, that border stays visible. This catches people who try to switch a border off with a word like disable: CSS has no such keyword, so the border remains.

To remove a border, use border-style: none or the shorthand border: none. Thickness and color belong in border-width and border-color, or in the border shorthand, which takes width, style and color in any order.

Invalid example

<style>
  .card {
    border-style: solid;
  }

  .card.flat {
    border-style: disable;
  }
</style>

Valid example

<style>
  .card {
    border-style: solid;
  }

  .card.flat {
    border-style: none;
  }
</style>

Learn more:

MDN Reference

MDN Web Docs: border-style

→

MDN Reference

MDN Web Docs: <line-style>

→

MDN Reference

MDN Web Docs: border

→