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?

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?

• javascript
• css

• You're going to have to be more explicit about what you're looking for. – Paul Tomblin Commented Jun 10, 2012 at 20:29

3 Answers 3

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

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

Live Example

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

If at all possible, it's likely best to make CSS classes with each corner's rounding specified and then use simple JS to swap between classes. That way you can specify fallbacks a bit easier if a browser needs -webkit-border-radius or border-radius or is IE, for example.