Geek Answers Handbook

DIV with rounded corners and inner scrollbars.

I am trying to create a scenario in which a DIV has inner scrollbars and rounded corners. My first attempt led to the following:

enter image description here

Right corners become square due to scrollbars.

Then I added an inner div with upper and lower indentation to skip the scroll bars and keep the counted frames. It turned out like this:

enter image description here

I need a hybrid where the scrollbars are the full length of the div but do not make the corners square. Is it possible?

+8
html css3
source share
2 answers

You should try a custom scrollbar. In your screenshots, you are on the X System, but with IE (Windows) it will be terrible.

See this question on the stack .

+1
source share

You can use border-radius surrounding the scrollbar-track container (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/

+11
source share

More articles:


All Articles