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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-border-style-thick-is-not-a-border-style-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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

```html
<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

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