14

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

enter image description here

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:

enter image description here

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?

Stephane Rolland
  • 38,876
  • 35
  • 121
  • 169
Lavie Tobey
  • 484
  • 1
  • 4
  • 12
  • could you share your html and css with us? – Eric Goncalves Feb 11 '13 at 18:18
  • After searching around some more and seeing some other opinions out there, I think I will end up either living with the browser scroll bar or using a custom scroll bar like JScrollPane. Thanks for the input!! – Lavie Tobey Feb 11 '13 at 21:24

2 Answers2

16

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/

Eric Goncalves
  • 5,253
  • 4
  • 35
  • 59
  • 5
    That is a nice looking solution, however, it needs to work in more than just Chrome. Opening this in FF shows a similar result to my first image. I don't think I can use this. – Lavie Tobey Feb 11 '13 at 20:55
3

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.

Community
  • 1
  • 1
soyuka
  • 8,839
  • 3
  • 39
  • 54
  • If this question is a duplicate of the one you've linked to, you should flag it as such. – KatieK Feb 11 '13 at 18:26
  • 3
    It's not a duplicate but a solution – soyuka Feb 12 '13 at 07:47
  • The rounded corners part is definitely the crux of this question which should never have been closed. At least in its current form it's as clear as could be. – Simon_Weaver Jun 24 '21 at 23:51
  • My solution to this is to set `::-webkit-scrollbar-thumb { border-width: 5px 5px 5px 0; border-color: transparent; }` and `::-webkit-scrollbar { background: none; }` The trick here is that first part - the thumb (draggable piece) is given a border (which pushes the scrollbar away from the edges of your rounded box) but that border is invisible so it has the effect of achieving the OP question. I'd put a proper answer but this question is closed. That's not a complete working example but it's the trick to get it working. – Simon_Weaver Jun 24 '21 at 23:54