CSS Custom JQuery ui-dialog

Question

I need to add a 2 pixel border around the JQuery ui-dialog.

Could anyone help on what to modify please?

Thanks

Answer 1

Change the CSS rule for .ui-widget-content:

.ui-widget-content {
    border: 2px solid #DDD;
}

The least intrusive way to do this is to add that rule to your site's stylesheet (e.g. don't change the jQuery UI CSS file), and make sure that the jQuery UI CSS file is loaded first.

Answer 2

To put a border around the dialog box, but not any other widget type, do this:

.ui-widget-content.ui-dialog
{
   border: 2px solid #DDD;
}