Question

I am using below procedure to modify CSS from JavaScript but it is not giving any result.

Can anybody please check the code and let me know the proper method. I need border for the table with radius.

This is my table structure:

<table id="tt" width="400" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="179" class="header_links">5<input name="input" class="lang_textbox" type="text" value="Search by keyword" /></td>
        <td width="52" align="left"><img src="images/search_go.jpg" width="28" height="24" alt="go" /></td>
        <td width="169" class="header_links"><a href="#">FAQs</a> | <a href="#">Sitemap</a> | <a href="#">Contact us</a></td>
      </tr>
    </table>

And below is the javascript which am using

document.getElementById('tt').style.borderRadius = '4em'; // w3c
document.getElementById('tt').style.MozBorderRadius = '4em'; // mozilla
document.getElementById('tt').style.border = '4em'; // mozilla

Answer 1

You’ve got to set the border itself (and note border is not a Mozilla-only property):

document.getElementById('tt').style.border = '4em solid black';

http://jsfiddle.net/KYEVq/