CSS scrollbar-color Property
Last Updated :
12 Jul, 2025
The scrollbar-color CSS property sets the colors of the scrollbar track and thumb, allowing for customization of the scrollbar's appearance. The thumb, the draggable part, can be styled globally by setting the property on the root element.
Syntax
scrollbar-color: auto | color | dark | light | initial | inherit;
/*
scrollbar-color: dark-shadow light-shadow;
*/
Property Values
| Property | Description |
|---|
| auto | Sets the scrollbar color to the browser's default. It is the default value for rendering the scrollbar. |
| color | Sets the scrollbar color to custom values. The first value applies to the scrollbar thumb, and the second applies to the scrollbar track. |
| light | Provides a lighter variant of the scrollbar, based on default or custom colors. Discontinued in all major browsers. |
| dark | Provides a darker variant of the scrollbar, based on default or custom colors. Discontinued in all major browsers. |
| initial | Resets the scrollbar color to its default value. |
| inherit | Inherits the scrollbar color from its parent element. |
Examples of CSS scrollbar-color Property
Example: Here we are using the scrollbar-color property set to 'auto' in a styled container.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS scrollbar-color
</title>
<style>
.scrollbar-auto {
scrollbar-color: auto;
height: 150px;
width: 200px;
overflow-y: scroll;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | scrollbar-color
</b>
<p>
The container below has
scrollbar-color set to
'auto'.
</p>
<div class="scrollbar-auto">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</div>
</body>
</html>
Output:
scrollbar-color: auto:Example 2: Here the scrollbar-color property, setting the scrollbar to red for the thumb and green for the track, within a light green container.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS scrollbar-color Property
</title>
<style>
.scrollbar-colored {
scrollbar-color: red green;
height: 150px;
width: 200px;
overflow-y: scroll;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | scrollbar-color
</b>
<p>
The container below has a
red green scrollbar-color.
</p>
<div class="scrollbar-colored">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</div>
</body>
</html>
Output:
scrollbar-color: color color;Supported Browsers: The browser supported by value attribute in option tag are listed below: