Removing border from tab ui control

Question

I have the following script:

http://jsfiddle.net/2HNvL/

but I can't seem to remove the light gray border around the tab control. Anyone here know how to do that?

I have tried the following:

    #tabs .ui-widget { border:none;  padding:0px; margin:0px; }
    #tabs .ui-widget-header { border:none; display:none; padding:0px; margin:0px; }
    #tabs .ui-widget-content { border:none; padding:0px; margin:0px; }

But that does not work.

Answer 1

Adding to your list a simple #tabs {border: none} should do the job.

Answer 2

Assuming I understand your question correctly you want to remove the border around the text

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,

If that is the case, your one selector is wrong for .ui-widget-content

 #tabs .ui-widget-content { border:none; padding:0px; margin:0px; }

Is looking for a child element of .ui-widget-content with a parent of #tabs

If you change it to this:

#tabs.ui-widget-content { border:none; padding:0px; margin:0px; }

Will target only an element with an id of tabs and a class of .ui-widget-content

Updated jsfiddle.

Answer 3

give the buttons a class, and remove the border from that class..

http://jsfiddle.net/2HNvL/3/

<input type="button" value="button1" id="button1" class='noBorder' />

...

.noBorder{border:none;}