SCRIPTED

• Click on the scrollbox content to copy the code. The underlined titles lead to the source.

height: 100px; padding: 8px; border: 3px dotted #000; font-size: 1rem; overflow-y: scroll;

Dotted

border-top: 3.5px double #000; border-left: 3.5px double #000; border-right: 3.5px double #ccc; border-bottom: 3.5px double #ccc;

Double Border

border: 3px solid; border-image-slice: 1; border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);

Rainbow

::-webkit-scrollbar { width: 0; /* remove scrollbar space */ background: transparent; /* to make scrollbar invisible */ } ::-webkit-scrollbar-thumb { background: transparent; }

Invisible Scrollbar

/* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color: #e4e4e4; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #e4e4e4; border: 1px solid #aaa; }

Style 1 Scrollbar (c) chngmis

::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-track { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII="); image-rendering: pixelated; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } ::-webkit-scrollbar-track:active { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg=="); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } ::-webkit-scrollbar-thumb { border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid black; border-bottom: 1px solid black; box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e; width: 16px; height: 16px; background-color: #cccccc; z-index: 1; } ::-webkit-scrollbar-corner { background-color: #cccccc; } ::-webkit-resizer { width: 16px; height: 16px; background-color: #cccccc; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg=="); background-position: bottom right; background-repeat: no-repeat; image-rendering: pixelated; } ::-webkit-scrollbar-button, .scroll::-webkit-scrollbar-button { border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid black; border-bottom: 1px solid black; box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e; display: block; width: 16px; height: 16px; background-color: #cccccc; image-rendering: pixelated; background-repeat: no-repeat; background-position: center center; } ::-webkit-scrollbar-button:active, .scroll::-webkit-scrollbar-button:active { background-position: 2px 2px; } ::-webkit-scrollbar-button:horizontal:decrement, .scroll::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC"); } ::-webkit-scrollbar-button:horizontal:increment, .scroll::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII="); } ::-webkit-scrollbar-button:vertical:decrement, .scroll::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII="); } ::-webkit-scrollbar-button:vertical:increment, .scroll::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII="); } ::-webkit-scrollbar-button:horizontal:increment:start, .scroll::-webkit-scrollbar-button:horizontal:increment:start { display: none; } ::-webkit-scrollbar-button:horizontal:decrement:end, .scroll::-webkit-scrollbar-button:horizontal:decrement:end { display: none; } ::-webkit-scrollbar-button:vertical:increment:start, .scroll::-webkit-scrollbar-button:vertical:increment:start { display: none; } ::-webkit-scrollbar-button:vertical:decrement:end, .scroll::-webkit-scrollbar-button:vertical:decrement:end { display: none; } ::-webkit-scrollbar-button:active, .scroll::-webkit-scrollbar-button:active { border-top: 1px solid #868a8e; border-left: 1px solid #868a8e; border-bottom: 1px solid #868a8e; border-right: 1px solid #868a8e; box-shadow: none; }

Style 2 Scrollbar

::-webkit-scrollbar { width: 14px; } ::-webkit-scrollbar:horizontal { height: 14px; } ::-webkit-scrollbar-corner { background: #eee; } ::-webkit-scrollbar-track:vertical { background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%); border-radius: 5px; } ::-webkit-scrollbar-track:horizontal { background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%); border-radius: 5px; } ::-webkit-scrollbar-thumb { border: 1.5px solid #888; border-radius: 5px; box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff; } ::-webkit-scrollbar-thumb:vertical { background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb); } ::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb); } ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement { display: block; } ::-webkit-scrollbar-button:vertical { height: 15px; } ::-webkit-scrollbar-button:vertical:start:decrement { background: white; background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee; background-repeat: no-repeat; background-position: center; -moz-background-size: 100% auto, cover; -webkit-background-size: 100% auto, cover; -o-background-size: 100% auto, cover; background-size: 100% auto, cover; border: 1.5px solid #888; border-radius: 5px; } ::-webkit-scrollbar-button:vertical:start:increment { display: none; } ::-webkit-scrollbar-button:vertical:end:decrement { display: none; } ::-webkit-scrollbar-button:vertical:end:increment { background: white; background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee; background-repeat: no-repeat; background-position: center; -moz-background-size: 100% auto, cover; -webkit-background-size: 100% auto, cover; -o-background-size: 100% auto, cover; background-size: 100% auto, cover; border: 1.5px solid #888; border-radius: 5px; } ::-webkit-scrollbar-button:horizontal { width: 14px } ::-webkit-scrollbar-button:horizontal:start:increment { display: none; } ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; } ::-webkit-scrollbar-button:horizontal:start:decrement { background: white; background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%); background-repeat: no-repeat; background-position: center; -moz-background-size: 100% auto, cover; -webkit-background-size: 100% auto, cover; -o-background-size: 100% auto, cover; background-size: 100% auto, cover; background-position: center; border-radius: 5px; border: 1.5px solid #888; } ::-webkit-scrollbar-button:horizontal:end:increment { background: white; background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%); background-repeat: no-repeat; background-position: center; -moz-background-size: 100% auto, cover; -webkit-background-size: 100% auto, cover; -o-background-size: 100% auto, cover; background-size: 100% auto, cover; background-position: center; border-radius: 5px; border: 1.5px solid #888; }

Style 3 Scrollbar

border: 3px purple groove;

Groove

::-webkit-scrollbar { width: 0; /* remove scrollbar space */ background: transparent; /* to make scrollbar invisible */ } ::-webkit-scrollbar-thumb { background: transparent; }

Box Shadow Inset with Scrollbar Hidden

border: 2px solid black; border-radius:2em;

Border with Corner Rounding

#sbox-changedwidthheight { width:80%; border: 3px double #f9c5df; transition: width 0.7s ease } #sbox-changedwidthheight:hover { width:100%; background: #fedeee; }

Scrollbox changes height, width, or style Hover

Title @font-face { font-family: ALBA; src: url(https://dl.dropbox.com/s/0l4qryezh7ac9ls/ALBA____.TTF); } .box { /* css for main box */ font-family: 'Archivo', sans-serif; font-weight: 400; color: #000; height: 2em; width: 30%; border: 1px solid #c68bf9; border-radius: 1em; padding-top: 1em; padding-bottom: 0.5em; padding-left: 0.5em; padding-right: 0.5em; overflow: hidden; overflow-x: hidden; position: static; transition: width 1s, height 1s; -webkit-transition: opacity 1s linear; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(235,209,255,1) 100%); } .box:hover { /* box when hovered */ overflow-y: scroll; height: 8em; width: 50%; z-index: 2; border-radius: .5em; transform-origin: 50% 50%; -moz-transition: all 2s; -webkit-transition: all 2s; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,209,255,1) 100%); } .box:hover text { opacity: 0; transition: 3s; font-size: 0; } .box text { transition: 2s; } .box:hover > div { margin-top: -1.5em; } .box > div { transition: 2s; } text { /* titles */ transition: 2s; color: #000; font-family: ALBA; font-size: 1.5em; color: white; -webkit-text-stroke: 1px black; text-align: left; position: relative; left: 0; bottom: 0.5em; } html { overflow: scroll; overflow-x: hidden; }

Scrollbox title disappears when hovered (c) lobilles