HTML Guides for border-style

The border-style property controls the visual pattern of a border — whether it appears as a solid line, a series of dots, dashes, or other decorative styles. Its valid values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.

The keyword thick is a valid value for border-width, which controls how wide or heavy the border appears. It's one of three named width keywords: thin, medium, and thick. When thick is mistakenly used as a border-style value, the browser cannot interpret the declaration, and the border may not render at all or may fall back to unexpected defaults.

This is a common mix-up because people often think of a "thick border" as a single concept, but CSS separates the concern into two distinct properties: the style (what it looks like) and the width (how thick it is). Both must be set correctly for the border to display as intended. Without a valid border-style, most browsers default to none, meaning no border is visible regardless of other border properties.

To fix the issue, replace thick in your border-style declaration with a valid style keyword, and move thick to border-width if you want a heavier border. Alternatively, you can use the border shorthand to set width, style, and color in a single declaration.

Examples

Incorrect: using thick as a border style

<div style="border-style: thick;">This border will not render correctly.</div>

The value thick is not recognized for border-style, so the declaration is invalid.

Correct: separating style and width

<div style="border-style: solid; border-width: thick;">This has a thick solid border.</div>

Here, solid defines the border pattern and thick defines the border width — each value is used with the correct property.

Correct: using a specific pixel width

<div style="border-style: dashed; border-width: 4px;">This has a 4px dashed border.</div>

You can use any length value (like 4px or 0.25em) for border-width instead of the thick keyword for more precise control.

Correct: using the border shorthand

<div style="border: thick solid #333;">This uses the border shorthand.</div>

The border shorthand accepts width, style, and color in any order. This is often the most concise way to define a border and avoids confusion between the individual properties.

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>