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)
- -moz-border-radius-topleft and -webkit-border-top-left-radius
- -moz-border-radius-topright and -webkit-border-top-right-radius
- -moz-border-radius-bottomleft and -webkit-border-bottom-left-radius
- -moz-border-radius-bottomright and -webkit-border-bottom-right-radius
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.
Have some feedback? Leave a comment
Nice Stuff! Thanks man
cool ! keep it coming
Nice work dude, thanks for the tip! Can IE just go away now, please?
Tested it in Opera and it doesnt work. But thanks! It rocks in Firefox!
This really is awesome!!
Pingback: Leonaut.com
Pingback: CSS3 ile Gelen Köşeleri Kolayca Yuvarlama Özelliği at gKAANs.oRg - teknoloji & internet blogu!
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.
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.
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!
Tumbleweed,
Have you seen wordpress admin buttons etc (new version)
Hey, that’s great!
@tumbleweed, this is CSS3, isn’t it?
@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?
Tumbleweed,
They started using it from 2.5
http://stylizedweb.com/2008/03/19/wordpress-25-interface/
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.
@Barney – that’s how I’m planning on using this, too. Totally cannot wait to use FF6 instead of IE9!
Pingback: Linkswitch: Coders FTW - FreelanceSwitch - The Freelance Blog
Pingback: thinkerpool.com: » Linkswitch: Coders FTW
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.
Chrome actually does a horrible job rendering this. Looks great in Firefox and Safari though.
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
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
That’s a good article Bill!
If you have something else interesting feel free to share it here on stylized web
Thanks for this very cool post buddy. Keep sharing new ideas and we will keep passing by with you blog…
Pingback: how to play scratchcard
Pingback: Kaan Şengül » CSS3 ile Gelen Köşeleri Kolayca Yuvarlama Özelliği
Pingback: blak jak training classes player dealer
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
Nice Stuff! Thanks man
The code above also works on Google Chrome and in Chromium
Thanks for that.
thanks admin exciting blog
information is the most beautiful treasures
You can have a look at FlexiPanels CSS – a Dreamweaver extension that helps you create rounded corner CSS boxes without coding.
vdv xvxcv
kpss
If you replace the “opera” with just an “o” it work’s fine in the latest Opera Browser.
-o-border-radius: 10px;
Maybe also in earlier versions but I only got the latest.
hi…its good toutrials but its not working in internet exploer 7
please provide me its solution……..thanks
Pingback: Soursday Srok Khmer » Blog Archive » Crée Coins arrondis Css3 avec Wordpress 3 et 2.x
thanks for code CSS3
Just add standard
border-radius: 10px;
and in Opera 10 and other browsers (incl. IE9) it works
Pingback: Rounded Corners | ✽ Cecilia Hartvig-Bollin ✽
Pavel’s right, you don’t need the -opera (don’t even think it works) any more, you can just run it as:
border-radius: 5px;
To add on, the individual sides would be (for Opera / IE9):
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
%100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.
Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı
bayanlarla kameralı görüntülü sohbet
oh my!! i love you so much!!
It’s really great article. I would like to appreciate your work and would like to tell to my friends.
worked for me
.. thanks
lol .. I feel so under water right now
Great tutorial, We at http://www.fredricksw.com/devshack/ also post tutorials similar to this come visit us
another CSS
realy Im reading post so fast
http://www.outlet-louisvuittonukcom.com/louis-vuitton-agendas-damier-ebene-canvas-c-72_74.html
Just add standard
border-radius: 10px;
and in Opera 10 and other browsers (incl. IE9) it works