# CSS: “scrollbar-color”: X is not a “scrollbar-color” value.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-scrollbar-color-x-is-not-a-scrollbar-color-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `scrollbar-color` property has a value that is neither `auto` nor a pair of colors, so browsers ignore the declaration and draw the default scrollbar.
`scrollbar-color` sets the colors of an element's scrollbars. It takes the keyword `auto`, which leaves the colors to the browser, or two colors separated by a space. The first color paints the thumb (the part you drag) and the second paints the track behind it. The CSS-wide keywords `inherit`, `initial`, `unset` and `revert` are accepted too. Any other word gets this message, with the rejected word quoted in it.
The values `undefined` and `null` usually come from JavaScript or a template that writes a variable into the style before it has a value, as in `el.style.cssText = "scrollbar-color: " + theme.scrollbar`. Older stylesheets may use `dark` or `light`, which an early draft of the specification allowed and the current one dropped. `thin` and `none` belong to `scrollbar-width`, not to this property.
A single color is also invalid, since the property needs both the thumb and the track. The validator reports `scrollbar-color: #888` with a different message, "Too many values or values are not recognized".
To fix it, give the property two valid colors or `auto`, or leave the declaration out when there is no color to apply. In scripts, check that the variable is set before writing it into the style.
## Invalid example
```html
```
## Valid example
```html
```