Coloured Scrollbars

browser wars 2000 dead

Seven CSS properties for repainting the browser's own scrollbar.

In 2026: Dead in IE, and the modern replacements are different again: scrollbar-color and scrollbar-width in Firefox, and the ::-webkit-scrollbar pseudo-elements in Chrome. Nobody has agreed on this in twenty five years.

Where it came from: Microsoft Internet Explorer 5.5 documentation, 2000. MDN ↗

<style>
body {
  scrollbar-face-color:       #000080;
  scrollbar-arrow-color:      #FFFF00;
  scrollbar-track-color:      #000040;
  scrollbar-shadow-color:     #0000FF;
  scrollbar-highlight-color:  #6666FF;
  scrollbar-3dlight-color:    #9999FF;
  scrollbar-darkshadow-color: #000020;
}
</style>

<!-- The 2026 versions, still two of them -->
<style>
html { scrollbar-color: #ff0 #000080; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px }
::-webkit-scrollbar-track { background: #000040 }
::-webkit-scrollbar-thumb { background: #000080 }
</style>

sandboxed demo · breaks nothing but itselfrestart

More in browser wars