Removing auto-corner classes from accordion & tabs

Removing auto-corner classes from accordion & tabs

I need help removing the auto-corners from the the accordion and tabs, Something like a ui-corners-none override option.

The accordion has three states and within the states are different corners. (active = ui-corner-top & ui-state-hover / ui-state-default = ui-corner-all) but I don't want any corners in the accordion element at all.

I require the same removal of corners for the tabs header row which I'm assuming is in the <ul> using the ui-widget-header class.

I tried a bunch of options, but I can't figure out how this is done... any help would be appreciated!!!

Thanks :-)


    $(function() {

        $("#accordion").accordion({
            removeClass: "ui-corners-all"

        $("#ui-state-active").accordion({
            removeClass: "ui-corners-top"
        });

        $("#accordion").ui-state-active({
            removeClass ('ui-corners-top')
        });
});


    $(function() {

        $("#tabs").tabs({
            removeClass: "ui-corners-all"

        $("#ui-widget-header").tabs({
            removeClass: "ui-corners-all"
        });

        $("#tabs").ui-widget-header({
            removeClass ('ui-corners-all')
        });
});