How to override jQuery-ui.css styles

Question

I've implemented the jQuery-ui tabs widget and it works great. However, it does some style things I don't like. Specifically the .ui-corner-all is rounded, and I don't want that.

What is the "correct" way to override this. Should I use a theme?

Does someone have a good beginner tutorial on how to use/create ui themes?

Answer 1

try using important

.ui-corner-all{
border: 0px !important;
}

in custom style sheet or head of the doc.

Answer 2

I would recommend against trying to override JQuery UI's styling manually, and instead opt to use JQuery UI's ThemeRoller page.

Modifying the theme using the ThemeRoller will ensure maximum compatibility for future upgrades, rather than overriding certain styles just to have them changed or conflict next time you try to upgrade to a newer version of JQuery UI.