webkit scrollbars

this should make the scrollbars look inset a bit, but won't help the hiding of content passing behind them.

by nilloc

HTML

<div id="tester">
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.</p>
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>

CSS

::-webkit-scrollbar{height:10px; width:10px; -webkit-border-radius:5px;}
::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-track-piece{background-color:#eee; opacity:0.5; margin-bottom:6px; margin-right:6px; margin-top:6px; margin-left:6px; -webkit-border-radius:5px;}
::-webkit-scrollbar-thumb:vertical{height:25px; background-color:rgba(0,0,0,0.25); -webkit-border-radius:5px;}
::-webkit-scrollbar-thumb:horizontal{width:25px; background-color:rgba(0,0,0,0.25); -webkit-border-radius:5px;}

#tester{border:1px solid gray; border-radius:5px; padding:10px; width:300px; height:300px; overflow:auto}
p{margin-bottom:1em;}