How to remove rounded corners from one jQuery UI widget but not the others?

My particular problem is that I want the autocomplete function to not have round corners, but all the other widgets that have round corners should.

Is there a parameter I can pass to disable the corners just for the autocomplete?

Edit

Let's see if this can be answered.

On page Datepicker.

I'd like to remove all round-corner classes from appearing (the header and the next-previous buttons).

$( "#datepicker" ).datepicker('widget').removeClass('ui-corner-all'); would not work.

Very late but here it goes:

jQuery UI widgets have a method, which returns the HTML node for the widget itself. So the answer would be:

$('#someinput').autocomplete(...).autocomplete('widget').removeClass('ui-corner-all');

Responding to the EDIT:

As far I can see, you need to chain widget() method with autocomplete() (or datepicker()) method for it to work. Seems like it doesn't work for regular HTML nodes returned by $().

assign this css class to the element with corners of your widget.

.ui-corner-flat {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

$("#elementwithcorners").addClass("ui-corner-flat");

to remove the bottom left radius

in the constructor I did this

    $( "#signup" ).dialog(
        {
            create: function (event, ui) {

                $(".ui-dialog").css('border-bottom-left-radius','0px');
            },

        }
    );

The _suggest() method of the Autocomplete widget calls menu.refresh(), and therefore resets the ui-corner-all class for menu items, etc., each time the input changes. However, the open() callback is called after every menu.refresh() call within _suggest(), and so is a sensible place to adjust classes as desired:

$("#autocomplete").autocomplete("option", {
  open: function(event, ui) {
    $(this).autocomplete("widget")
           .menu("widget").removeClass("ui-corner-all")
           .find(".ui-corner-all").removeClass("ui-corner-all");
  }
});

The Datepicker widget is a little tougher, as it's built to be sort of a semi-singleton. Here we need a monkey patch to do it consistently, since none of the supplied callback options is suitable:

// store the built-in update method on the "global" instance...
$.datepicker.__updateDatepicker = $.datepicker._updateDatepicker;
// ...and then clobber with our fix
$.datepicker._updateDatepicker = function(inst) {
  $.datepicker.__updateDatepicker(inst);
  inst.dpDiv.removeClass("ui-corner-all")
      .find(".ui-corner-all").removeClass("ui-corner-all");
};

Note that the default _updateDatepicker() implementation has no return value. Also, note that the _updateDatepicker() method is not an interface method, so should not be assumed to be available. As such, the most consistent way to accomplish the corner fix is with appropriate CSS, along the lines of:

.ui-autocomplete.ui-menu.ui-corner-all,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-corner-all,
.ui-datepicker.ui-corner-all,
.ui-datepicker-header.ui-corner-all,
.ui-datepicker-next.ui-corner-all,
.ui-datepicker-prev.ui-corner-all {
  border-radius: 0;
}

More specificity (or the !important directive) may be used to ensure these selectors are respected. This is exactly why jQuery uses theme classes – fudging these things in is an interesting hack, but it's the less clean option unless style is unavailable…

Create a new CSS class for the element you don't want rounded corners.

p.rounded { border-radius: 10px; }

p.none-rounded { border-radius: 0; }