Custom scrollbar CSS for all Modern Browsers

Last Updated On
Thursday 2nd Jun 2022

Custom Scrollbar CSS

  • In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS.
  • As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling.
  • However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers.

CSS Scrollbar Style

  • CSS Scrollbars are supported by Firefox and ::-webkit-scrollbar by Chromium based (Chrome, Edge) and Safari.
  • All modern browsers will eventually transition to CSS Scrollbars specification.
  • Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.

The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

Style ScrollBar

Scroll Border

	/* Firefox */
* {
  scrollbar-width: thick; /* none | auto  */
  scrollbar-color: #ffa07a transparent;
}

/* The first applies to the thumb of the scrollbar, the second to the track. */
/* Firefox */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 14px; /* vertical scrollbar */
  height: 14px; /* horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #ffa07a;
  border-radius: 14px;
  border: calc(14px / 4) solid #ccc;
}

*::-webkit-scrollbar-thumb:hover {
  background: #ff7f50;
}
/* Chrome, Edge, Safari */
	

Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.

References

custom scrollbar css for all browsers
custom scrollbar for all browsers
style scrollbar css all browsers
scrollbar css for all browsers
modern scrollbar css
css custom scrollbar
css style scrollbar
custom scrollbar css all browsers
style scrollbar css
styling scrollbar for all browsers
customize scrollbar css
scrollbar style css
scrollbar css style for all browsers
css modern scrollbar
how to change scrollbar style in css for all browsers
css scrollbar styling