Rounded Corners in Mozilla Firefox
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.
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 */
}
Wouldn't it be great if we could get all browsers to support CSS rounded corners?
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
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
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/
This is also available with webkit
@Livingstone: Correct, but the syntax is slightly different. Look forward to that tomorrow. :)
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.
You might want to mention that it’s a CSS3 property…
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.
I love rounded corners. I really wish Internet Explorer supported them. There is also the
-khtml-prefix.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/
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” :-)