DIV with rounded corners and internal scrollbars [

Question

I am attempting to achieve a scenario where a DIV has internal scroll bars and rounded corners. My first attempted resulted in this:

The right hand corners become square, on account of the scroll bars.

Next, I added an internal div with some top and bottom padding, in order to push the scrollbars down and maintain the counted corders. That came out like this:

I'd like a hybrid where the scroll bars are the full length of the div but don't make the corners square. Is this possible?

Answer 1

You can use border-radius the surrounding container(scrollbar-track) of the scrollbar (scrollbar-thumb).

example:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

jsFiddle: http://jsfiddle.net/p2bWf/

source: http://css-tricks.com/custom-scrollbars-in-webkit/

Answer 2

You should try a custom scrollbar. On your screenshots you're on a OS X System, but with IE (Windows) it'll be awfull.

Take a look on this stackoverflow question.