Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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'

Problem courtesy of: Alvaro

Solution

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.

Solution courtesy of: Sammy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×