Removing rounded corners on jQueryUI elements

I had this question today and it turns out the answer is pretty simple

  1. First, it’s important to note that as of this writing IE 8 (what I tested) doesn’t render rounded corners as implemented in jQueryUI v1.8.14 though I understand there is a plugin that enables that feature.
  2. To remove rounded corners on all elements of jQueryUI (for Chrome, FF and Safari) you can include the following in your own CSS:
    .ui-corner-all { border-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-topleft: 0px;}

Now, credit where credit is due.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.