The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern


Last updated on:

The scrollbar set of CSS properties is a proprietary style hook from Internet Explorer 5.5, which let designers create custom themes for the browser's native scrollbars. Currently, it is exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine. This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article.

body::-webkit-scrollbar {
    width: 1em;
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

  1. ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
  2. ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
  3. ::-webkit-scrollbar-track addresses the empty space “below” the progress bar
  4. ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
  5. ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
  6. ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
  7. ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

In addition to these pseudo-elements, there are also eleven pseudo-selector classes that aren't required, but provide designers with the power to style various states and interactions of the scrollbar UI. A full breakdown of those pseudo-selectors, and a detailed example, can be found in this CSS-Tricks article.

Check out this Pen!

Points of Interest

  • If there is no qualifying selector preceding the various pseudo-elements, the styles will apply to any scrollbar that may appear on the page.
  • Setting -webkit-scrollbar styles is a good way to force your webpage to show horizontal or vertical scrollbars on versions of Mac OS newer than Lion, on which scrollbars are usually hidden by default.
  • Since this property is behind a -webkit vendor prefix, several jQuery plugins have been written to “polyfill” or extend this functionality to other browsers. One such plugin is jScrollPane.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
yep yep nope 15+ nope yep yep


  1. Umar Farooque

    No more information on this and other properties? I mean you can provide some examples or illustration on these properties.

  2. MartinMuzatko
    Permalink to comment#

    This property is rather antique. It used to work in IE 5.5

    Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that.

  3. susi
    Permalink to comment#

    Nice example………. and this page has very very useful and wonderful features . especially this comment area is awesome!

  4. Erik Cervin Edin
    Permalink to comment#

    No browser support for Firefox and is an open issue since 2001



  5. sakti prasad debnath
    Permalink to comment#

    how will i be able to customize the browser’s right scrollbar using css????

  6. sabir
    Permalink to comment#

    Hi Martin ,
    Firstly , thanks a lot for sharing this about using scrollbar , I created a scroll bar for my text content in my html app , and now the scroll bar looks and works fine , but the guy at my office who reviewed my UI said that the when the text content is scrolled , it appears as if the text is getting cut and displayed at the top or at the bottom . I actually tried to scroll the text in your example and feel the same .

    DO you have any suggestion on how i can get rid of the text being shown as half cut when i scroll ??


  7. Nader Nael Besada
    Permalink to comment#

    This websiteos is asomitos

  8. Baby
    Permalink to comment#

    Thank you you so much its very helpful to me :)

  9. muthu pandianc
    Permalink to comment#

    thank you nice information for front end developers

  10. Sachin
    Permalink to comment#

    ThanQ boss, this example helped me in designing my website.

  11. masum billah
    Permalink to comment#

    It’s nice. Better if run the firefox and IE.

  12. Sheyad
    Permalink to comment#

    Not working in Firefox & IE

  13. Kayson
    Permalink to comment#

    How can I apply original style to ::-webkit-scrollbar-button? Do I have to specify background image for it?

  14. Arunthathi
    Permalink to comment#

    is there any way to increase the scroll bar width in IE 11?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed