How to apply Border-radius with jScrollPane (jquery plugin)

Question

I want to apply Border-radius Css property to a jScrollPane div.

This is my desired solution (which as far as I know works well in modern browsers): http://jsfiddle.net/dF9ng/

However I want to apply this to a jScrollPane div. This is my attempt: http://jsfiddle.net/SWtVC/

It seems to work correctly in Firefox. However in Chrome it doesn't work at all.

Is this a Chrome bug? Is it working correctly in other browsers? If it is a plugin bug, could someone provide me a fix or another possible solution?

Thanks in advance'

You can try for example for scrollbars: `.jspDrag {border-radius:14px}` — Stano, Jul 17 '12 at 17:13
you might not be able to get a border on all four corners, only on the bottom right `.jspCorner{border-radius: 0 0 50px;}` — aurel, Jul 17 '12 at 17:22

score 0 · Accepted Answer · edited May 23 '17 at 10:34

You can set the article to position absolute, set its overflow to Hidden, however this won't work in Chrome/Safari, but there is a fix for it: CSS masks

Your HTML markup remains as is, and here's your new CSS:

article{
    border:1px solid black;
    margin:30px;
    border-radius:50px;
    width:300px;
    height:300px;
    overflow:hidden;
    position:absolute;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

}

jsFiddle

I should also mention that, I found this by coming across a similar question.

Eric Robinson · Answer 2 · 2012-07-20T12:40:49.593

-2

Check out my fiddle. I think this is what you wanted.

jsFiddle

edited Jul 20 '12 at 12:40

answered Jul 19 '12 at 17:20

Eric Robinson

2,025
14
22

This solution is not applying the jscrollPane correctly, the scrollbars are common ones not the plugin's. – Alvaro Jul 20 '12 at 08:09
Oh I see what your looking for. Check my updated JsFiddle it should work now – Eric Robinson Jul 20 '12 at 12:40
Sorry, maybe I didn't explain myself correctly. That solution doesn't work for Chrome. – Alvaro Jul 21 '12 at 10:18

How to apply Border-radius with jScrollPane (jquery plugin)

2 Answers2