CSS scrollbar Property

The ::-webkit-scrollbar set of CSS pseudo-elements is a proprietary style hook letting designers create custom themes for the browser's native scrollbars.

Info

These pseudo-elements are exposed behind the -webkit vendor prefix and are primarily supported in Chromium-based browsers. They are not supported in Firefox or Safari. For broader browser support, consider using the standard scrollbar-width and scrollbar-color properties.

The ::-webkit-scrollbar pseudo-elements consist of seven different parts that, together, comprise a full scrollbar UI element. These seven pseudo-elements are the following:

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-scrollbar-resizer

A scrollbar only appears when an element's content is larger than its box, so styling it goes hand in hand with the overflow family of properties — overflow-x and overflow-y let you control horizontal and vertical scrolling independently.

Syntax

To style scrollbars, you apply CSS rules directly to the ::-webkit-scrollbar pseudo-elements on the scrolling container. You can target any element with overflow set to scroll or auto, not just the body.

.scrolling-element::-webkit-scrollbar {
  /* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
  /* thumb styles */
}

Example of the scrollbar pseudo-elements:

CSS scrollbar code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #eee;
        overflow: scroll;
        width: 85%;
        max-width: 600px;
        margin: 0 auto;
        padding: 3em;
        font: 100%/1.4 Georgia, serif;
        border: 1px solid #666;
      }
      p {
        margin: 0 0 1.5em;
      }
      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: #666;
        outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Try it Yourself »

Example of the scrollbar pseudo-elements with ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #ececec;
        overflow: scroll;
        width: 90%;
        max-width: 550px;
        margin: 0 auto;
        padding: 2em;
        border: 2px solid #cccccc;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Try it Yourself »

Standard cross-browser scrollbars

Because the ::-webkit-scrollbar pseudo-elements only work in Chromium-based browsers, the CSS Working Group introduced two standard properties that Firefox supports today and that the Webkit/Blink engines now also recognize: scrollbar-width and scrollbar-color.

scrollbar-width — sets the thickness. Accepts the keywords auto (default), thin, or none (hides the scrollbar while keeping the element scrollable).
scrollbar-color — takes two colors: the thumb color first, then the track color.

.scrolling-element {
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5; /* thumb track */
}

A robust approach is to declare the standard properties first as a baseline, then layer the ::-webkit-scrollbar rules on top for finer control in Chromium browsers that need it:

.scrolling-element {
  /* Standard — Firefox and modern Chromium/Safari */
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5;
}

/* Detailed styling — Chromium-based browsers only */
.scrolling-element::-webkit-scrollbar {
  width: 10px;
}
.scrolling-element::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.scrolling-element::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}

Info

Use scrollbar-width: thin and scrollbar-color when you only need to recolor or thin the scrollbar across all modern browsers. Reach for the ::-webkit-scrollbar pseudo-elements only when you need to style individual parts (buttons, track piece, corner) that the standard properties cannot reach. Rounding the thumb with border-radius is -webkit- only.

Pseudo-elements

Pseudo-element	Description
`::-webkit-scrollbar`	The scrollbar itself.
`::-webkit-scrollbar-button`	The buttons on the scrollbar.
`::-webkit-scrollbar-track`	The track of the scrollbar.
`::-webkit-scrollbar-track-piece`	The part of the track not covered by the handle.
`::-webkit-scrollbar-thumb`	The draggable scrolling handle.
`::-webkit-scrollbar-corner`	The bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
`::-webkit-scrollbar-resizer`	The draggable resizing handle that appears at the bottom corner of some elements.

Practice

Which properties of CSS are employed to change the appearance of scrollbars?

Scrollbar-width and scrollbar-colorScrollbar-shape and scrollbar-sizeScrollbar-style and scrollbar-positionScrollbar-orientation and scrollbar-space