Border Radius Using Javascript

Question

Using CSS, separate border radius's are set like so:

border-top-left-radius: 10px;   
border-top-right-radius: 10px;   
border-bottom-left-radius: 10px;   
border-bottom-right-radius: 10px;

But how would I go along setting these separate border radius's using Javascript?

Answer 1

<div id="target">Lorem Ipsum</div>

<script type="text/javascript">
    var target = document.getElementById("target");
    target.style.borderTopLeftRadius = "20px";
</script>

Live Example

Answer 2

element.style['border-top-left-radius'] = '4px';
element.style['border-top-right-radius'] = '4px';
element.style['border-bottom-left-radius'] = '4px';
element.style['border-bottom-right-radius'] = '4px';

Or even smaller:

element.style['border-radius'] = '4px';

You can also use:

element.style.borderTopLeftRadius = '4px';
element.style.borderTopRightRadius = '4px';
element.style.borderBottomLeftRadius = '4px';
element.style.borderBottomRightRadius = '4px';

But remember that it's not (yet) a web-standard, so each browser has it's own declaration:

element.style['border-radius']//Future standard
element.style['-webkit-border-radius']//Webkit(Safari and Chrome)
element.style['-moz-border-radius']//Mozilla Firefox
element.style['-o-border-radius']//Opera