Thanks for this very cool post buddy. Keep sharing new ideas and we will keep passing by with you blog…
When New WordPress started using this i though you know Internet Explorer is definitely out now when i'm doing some css work that needs rounded corners I'm mostly using only this technique because buyers are ok with it although it's just for FireFox and Safari. And since most of people still don't know about this i figured it's good thing to share.
Of course i'm talking about Border-radius property for FireFox and Safari 3 (only). And here are some nice examples how to use it.
#box { background: #eee; border: 1px solid #ccc; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
And now FireFox and Safari 3 users will have rounded corners.
Nice, huh 
And of course you don't have to make all corners rounded, it can be just top left etc, so the code goes like this (small not, for example you can't make rounded corners on images and stuff like that)
Update: I've just ran into border radius for opera (example -opera-border-radius: 10px;) but i haven't tested it yes, so i'm not sure it's working, anyway go to know.
Thanks for this very cool post buddy. Keep sharing new ideas and we will keep passing by with you blog…
That’s a good article Bill!
If you have something else interesting feel free to share it here on stylized web
This is a good technique for Safari and Firefox users. I wrote an article covering how to stick with CSS3 corners for them but fall back to corner images in IE, since there doesn’t look like any chance that IE will support border-radius any time soon.
you can see the article here
Knoxville,
yes i know, also lists (unordered) look really bad in chrome, but all the rest i think is good!
Also you might notice that it renders float right like safari so this is also one of the problems
Chrome actually does a horrible job rendering this. Looks great in Firefox and Safari though.
The opera solution does not work. There’s a dev article written by David Storey that explains how to use SVG to accomplish rounded corners in Opera, but it’s a hack at best. IE8 is also a no go. However, the good news is that webkit declarations also work with Chrome and knowing how Google is peeving Microsoft lately, this may put a little fire under the IE team’s tails.
@Barney - that’s how I’m planning on using this, too. Totally cannot wait to use FF6 instead of IE9! 
Seeing as you’re already invalidating your CSS by using proprietary commands when you do this, I always chuck in border-radius:10px; too — that way my great grandchildren will be able to appreciate the full glory of no sharp edges with their IE9s.
Tumbleweed,
They started using it from 2.5
http://stylizedweb.com/2008/03/19/wordpress-25-interface/
@gareth:
It’s a CSS3 ability, but these are using browser-specific attributes, so if IE8 implements the actual CSS3 versions of these, -moz and -webkit things won’t work, so you’ll get to repeat these for each browser you want it to work in. As long as it works, though, that’s not such a high price to pay, just irritating.
@dejan:
Nope; I”ll have to check those out. Is this in 2.6, or are you taking about the 2.6.1 I see mentioned over in the side panel right now?
Hey, that’s great!
@tumbleweed, this is CSS3, isn’t it?
Tumbleweed,
Have you seen wordpress admin buttons etc (new version)
Personally, I use the Nifty Corners solution, which creates rounded corners via JavaScript. Only works for people with JavaScript enabled, but you’ll find that’s a lot higher than people who use Firefox and Safari (though I’m a dedicated Firefox user myself).
I have a half written WordPress plugin to do this. I use it myself, but it needs some polishing before it could be released - I hope to get back to it someday!
I just tried this with form elements in FF3, and it works beautifully! I’d suggest you give identical padding values for the input fields as your radius, so you don’t get any cursor or text overlapping the rounded edges. When you do a SELECT, it looks much better to only round the left side of the element, and leave the right side where the dropdown button is square. Looks *really* sharp, especially with hover/focus/active border/background color changes. Let’s hope IE8 implements this in a fully compatible way.
Well, I’m not sure I’d call this ‘CSS 3′, but ‘third-generation’ browser rounded corners. Both of those are browser-specific, not in the CSS spec (though they’re being implemented alongside CSS 3 stuff). Still, neat trick, and it degrades very well on IE & Opera, so there’s no harm in using it. Right on. I love how it even supports borders.
This really is awesome!!
Tested it in Opera and it doesnt work. But thanks! It rocks in Firefox!
Nice work dude, thanks for the tip! Can IE just go away now, please?
cool ! keep it coming
Nice Stuff! Thanks man
on November 27, 2008
I found a nice css technique to create curved div using just 3 line css
http://www.htmlremix.com/curved-corner-border-radius-cross-browser/
It works in IE6+ , FF all and all webkit browsers like safari and Chrome.
Its a fresh concept