Using jQuery UI to style a div

I have the jQuery UI "smoothness" theme and I would like to use开发者_如何学编程 the "look" to style divs on my page. E.g. apply the gray, shaded, rounded-corner effect to a regular div that ISN'T an accordion, button, etc.

I thought it would be easy! Perhaps it is?!

Thanks!

Have a look at jQuery UI themeroller. You can select an existing theme or customize one, then using Chrome or Firefox/Firebug, for example, Right-click → Inspect element and copy the class names.

ui-widget, ui-widget-content and ui-corner-all are the most likely class names you will be looking for.

Here is what I came up with need some CSS tweaking, but should work.

<div id="login" align="center" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="login_header" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    Header
</ul>
<div id="login_form" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    content
</div>