Rounded Corners in Mozilla Firefox

Written by David Walsh on Wednesday, December 17, 2008

One of the cool Firefox-specific browser CSS capabilities is the -moz-border-radius set of properties. The moz-border-radius properties allow you to create rounded-corner elements using only CSS.

View Demo

The CSS

	.sample {
		-moz-border-radius:10px; /* all corners */
		-moz-border-radius-topleft:15px; /* top left corner */
		-moz-border-radius-topright:50px; /* top right corner */
		-moz-border-radius-bottomleft:15px; /* bottom left corner */
		-moz-border-radius-bottomright:50px; /* bottom right corner */
		-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */
		border:1px solid #fc0; /* border color, per usual */
	}

View Demo

Wouldn’t it be great if we could get all browsers to support CSS rounded corners?

Download PDF

Follow via RSS Epic Discussion

December 17 / #

Clinton Montague says:

Webkit browsers also have similar capabilities using -webkit-border-radius which are closer to the standard which the W3C are proposing for CSS3.

Webkit and Moz border radius examples

W3C CSS3 border radius spec

December 17 / #

hartum says:

you can find a crossbrowser CSS round corner here:
http://www.htmlremix.com/curved-corner-border-radius-cross-browser/

and a crossbrowser JS here:
http://dillerdesign.com/experiment/DD_roundies/

December 17 / #

Livingstone says:

This is also available with webkit

December 17 / #

david says:

@Livingstone: Correct, but the syntax is slightly different. Look forward to that tomorrow. :)

December 17 / #

Tom says:

And there’s some Konquerer action too I believe. -khtml-border-radius or something like that.

It’s all good stuff for intranets and such, if you want a slightly more polished look within a “closed system” where you have control over the browser used and so on.

December 17 / #

James says:

You might want to mention that it’s a CSS3 property…

December 18 / #

Paul Davis says:

This is one of the few browser specific tricks I know, for FF and webkit. I still think that the jQuery corners plug-in is more usable, but I’m really concious of IE users. Probably to much.

December 22 / #

Nathan Chancellor says:

I love rounded corners. I really wish Internet Explorer supported them. There is also the -khtml- prefix.

December 27 / #

Darvin says:

You can make curved corned in any browser using 3line css.
you can get it here. Using Behavior for ie version. It works fine.
http://www.htmlremix.com/curved-corner-border-radius-cross-browser/

December 13 / #

Marcus says:

I say just use CSS3 properties for the rounded corners and any shadowing, they’re aesthetics anyway and won’t break on IE just end up square. This way no hacks, no reliance on Javascript and a kick in the teeth to Microsoft for not supporting W3C standards.

“OOh I’m gonna start using Firefox as my current browser makes everything look ugly” :-)