How to add image as the background to rounded corners in jQuery?

Question

I have included the jQuery round corner plugin for rounded corner functionality for my theme, for first theme it is working fine because I have not added any background image to theme. When I go for second theme I have added image as background, when I try to apply round corner functionality for the theme, it is adding some background color to the corners like this https://forum.jquery.com/topic/rounded-corners-plugin-jquer-corners-js-ie-problem

I have searched every where i have not found any solution regarding this. I even tried to add background image to #navigation li and #navigation a. but it is not working in IE8, for IE8 purpose I used jQuery round corner plugin, because css3pie is not working.

var jq=$.noConflict();
jq(document).ready(function(){
    alert('hello alert1 ');
    jq('#navigation li').attr("data-corner","right 20px");
    jq('#navigation a').attr("data-corner","right 20px");
    jq('#navigation li').corner();
    jq('#navigation a').corner();
    jq('#subMenu li').corner();
    alert('hello alert3 ');
});

I have to add image for corner color(cc) in http://malsup.github.io/jquery.corner.js . Can anyone help me?

Answer 1

A much easier solution would be to use border-radius .

For example,

<div id='navigation'></div>

would be your html, and then your CSS would look something like this..

#navigation{
    border-radius:10px;
}

No JavaScript required and much faster than using jQuery. If you're worried about browsers which do not support the border-radius property, you can use http://css3pie.com