CSS scrollbar-color Property

Description

The scrollbar-color CSS property is used to customize the color of the scrollbar in web browsers. It allows web developers to specify two values: the color of the thumb (the draggable part of the scrollbar) and the color of the track (the background of the scrollbar). This property helps in enhancing the visual aesthetics and user experience of web pages by allowing designers to match the scrollbar's appearance with the overall design of the website. However, it's important to note that not all web browsers support this property, so it may not have consistent behavior across all platforms.

Initial value
auto
Applies to
scrolling boxes
Inherited
yes
Computed value
as specified
Animatable
by computed value type
JavaScript syntax
object.style.scrollbarColor

Syntax

scrollbar-color: auto | <color>{2}  

Values

  • autoDefault platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.
  • <color>{2}Applies the first color to the scrollbar thumb, the second to the scrollbar track.

Example

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #007 #bada55;
}

Browser Support

The following table will show you the current browser support for the CSS scrollbar-color property.

Desktop
Edge Chrome Firefox Opera Safari
11811864xx
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
11864xxxx

Last updated by CSSPortal on: 31st December 2023