CODEWITHSUNDEEP
javascriptcss
Lodder
Lodder

Reputation: 19743

Border Radius 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?

Upvotes: 6

Views: 13171

Answers (3)

Danilo Valente
Danilo Valente

Reputation: 11352

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

Upvotes: 4

DACrosby
DACrosby

Reputation: 11470

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.

Upvotes: 0

Madara's Ghost
Madara's Ghost

Reputation: 175098

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

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

Live Example

Upvotes: 8

Related Questions