🎨 Complete Tutorial on WebKit Scrollbar Styling

WebKit-based browsers (Chrome, Edge, Safari, Opera) allow developers to fully customize scrollbars using a set of
::-webkit-scrollbar pseudo-elements. These give you control over width, thumb, track, buttons, and even corner areas of the scrollbar.

>>“WebKit scrollbar styling gives you total visual control over scrollbars in modern browsers.”

Note

✔ Works in Chrome, Edge, Safari, Opera
❌ Not supported in Firefox (use scrollbar-color instead)
✔ Great for dashboards, chat apps, editors, or themed UI

📦 List of WebKit Scrollbar Selectors

SelectorDescription
::-webkit-scrollbarStyles the overall scrollbar (width/height)
::-webkit-scrollbar-thumbDraggable element inside the scrollbar
::-webkit-scrollbar-trackBackground track where the thumb slides
::-webkit-scrollbar-track-pieceEach part of the track not occupied by the thumb
::-webkit-scrollbar-buttonArrow buttons at top/bottom (rarely visible today)
::-webkit-scrollbar-cornerCorner area where vertical & horizontal scrollbars meet

🎨 1. Base Scrollbar Styling

Base scrollbar

.scroll-box::-webkit-scrollbar {
  width: 12px;   /* vertical scrollbar width */
  height: 12px;  /* horizontal scrollbar height */
}

Use width and height to size your scrollbars.

🎨 2. Style the Scrollbar Thumb

Thumb

.scroll-box::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 8px;
}

The thumb is the draggable part inside the track.

🎨 3. Style the Scrollbar Track

Track

.scroll-box::-webkit-scrollbar-track {
  background: #e0e0e0;
}

The track is the background where the thumb slides.

🎨 4. Style the Scrollbar Track Piece

Track piece

.scroll-box::-webkit-scrollbar-track-piece {
  background: #f5f5f5;
}

Applies to specific sections of the track (above/below thumb).

🎨 5. Style Scrollbar Buttons

Scrollbar buttons

.scroll-box::-webkit-scrollbar-button {
  background: #ccc;
  height: 12px;
}

Many modern browsers hide arrow buttons, but styling is still supported.

🎨 6. Style the Scrollbar Corner

Scrollbar corner

.scroll-box::-webkit-scrollbar-corner {
  background: #ddd;
}

This covers the little square where horizontal and vertical scrollbars meet.

📦 Full Example: Custom Scrollbar Theme

Full WebKit scrollbar theme

.scroll-area {
  overflow: auto;
}

/* "Main" scrollbar area */
.scroll-area::-webkit-scrollbar {
  width: 12px;
}

/* Background track */
.scroll-area::-webkit-scrollbar-track {
  background: #eee;
}

/* Draggable thumb */
.scroll-area::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

/* Hover effect */
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Track piece */
.scroll-area::-webkit-scrollbar-track-piece {
  background: #f7f7f7;
}

/* Scrollbar buttons */
.scroll-area::-webkit-scrollbar-button {
  background: #ccc;
}

/* Corner square */
.scroll-area::-webkit-scrollbar-corner {
  background: #ddd;
}

🧪 Real-World Use Cases

1️⃣ Code Editors

Editor scrollbar

.editor::-webkit-scrollbar-thumb {
  background: #444;
}

2️⃣ Chat Apps

Chat list

.chat::-webkit-scrollbar {
  width: 6px;
}

3️⃣ Dashboard Panels

Dashboard

.panel::-webkit-scrollbar-thumb {
  background: #3498db;
}

⚠️ Common Mistakes

  • ❌ Forgetting these work only in WebKit browsers
  • ❌ Setting -webkit-scrollbar without overflow
  • ❌ Overstyling (makes UI distracting)
  • ❌ Using extremely small scrollbar widths (hurts accessibility)

Note

For Firefox, combine with scrollbar-width + scrollbar-color for full support.

🔥 Summary

WebKit scrollbar pseudo-elements allow deep customization of scrollbars in modern Chromium & Safari browsers. Combined with Firefox’s scrollbar properties, you can create beautiful, consistent scrollbars across platforms.

>>“Modern UI deserves modern scrollbars — WebKit scrollbars make that possible.”