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’

Answer 1

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.