While working on my slimScroll plugin I noticed something very weird in the newest release of Firefox - I was unable to set border-radius CSS property from within the JavaScript.

I created a demo page so you can check how the code in question is behaving in your browser.

I used this HTML to test my theory:

	 

		Radius should work here, it is set from CSS
	 
	 
	 

		Radius should work here, it is set using jQuery.css()
	 

	 

		Radius should work here, it is set using JavaScript
	 

I applied border-radius style using CSS to the first div only to make sure this feature works correctly:

    #cssTest { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

Next, I wanted to achieve similar effect for other two elements, but using JavaScript to apply the style, like that:

		  $(function(){
			
			//jQuery
			$('#jQueryTest').css({
				BorderRadius: "10px",
				MozBorderRadius: "10px",
				WebkitBorderRadius: "10px",
				border: "2px solid #0f0"
			});
			
			//javascript
			document.getElementById('jsTest').style.BorderRadius = "10px";
			document.getElementById('jsTest').style.MozBorderRadius = "10px";
			document.getElementById('jsTest').style.WebkitBorderRadius = "10px";
			document.getElementById('jsTest').style.border = "2px solid #00f";
		  });

But this is what I get on my Firefox 7.0.1:

Check out my Chrome screenshot here to compare.

As you can see Firefox is not applying the border-radius style at all. Funny enough, it works fine in Firefox 3.6.

I will fill up Mozilla bug report and update you on this issue.

Update

Corresponding Mozilla bug report can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=694885.

Update2

I got some more info from Mozilla developers: MozBorderRadius is no longer supported in JavaScript to set the radius of the border. Correct code, since Firefox 4.0 is:

    document.getElementById('jsTest').style.borderRadius = "10px";

Note the lower case "b".

What it means is that from now on, we need to remember to add one more entry, to ensure that radius is set in all browsers as Firefox 3.6 still uses MozBorderRadius...

While working on my slimScroll plugin I noticed something very weird in the newest release of Firefox - I was unable to set border-radius CSS property from within the JavaScript.

I used this HTML to test my theory:

	 

		Radius should work here, it is set from CSS
	 
	 
	 

		Radius should work here, it is set using jQuery.css()
	 

	 

		Radius should work here, it is set using JavaScript