jQueryUI Dialog: Close button shows dotted border in IE

I updated my jquery-UI dialog to version 1.10.3 but for some reason in IE the dialog’s close button started showing a dotted border. I knew it was due to the focus being set on the button because when I clicked anywhere on the page, it would disappear.

In addition to the unexpected border, the X icon was itself little mis-aligned i.e kind of unwanted offset.

Here’s how it looked:

I added the following to fix it (Reference):

.mydialog .ui-button { outline: none;}
.mydialog .ui-button-icon-primary{top:0px;left:0px;margin:1px;}

The .mydialog is just the dialogClass that I set when instantiating my dialog.

Fixed dialog looks like this:

Hope this helps if anybody is facing the same issue.