Webmonkey » rounded cornershttp://www.webmonkey.com
The Web Developer's ResourceMon, 06 May 2013 17:29:19 +0000en-UShourly1http://wordpress.org/?v=3.9.3A Universal Solution for Rounded Corners in Your Designshttp://www.webmonkey.com/2010/02/a_universal_solution_for_rounded_corners_in_your_designs/
http://www.webmonkey.com/2010/02/a_universal_solution_for_rounded_corners_in_your_designs/#commentsThu, 18 Feb 2010 11:30:29 +0000Scott Gilbertsonhttp://www.webmonkey.com/blog/auniversalsolutionforroundedcornersinyourdesignsSay what you will about the aesthetics of rounded corners in web design, the reality is you’re probably going to have to implement them some day. It used to be that rounded corners required four separate images. Then came a clever trick that used just one circular image. But creating rounded corners was still a […]

]]>Say what you will about the aesthetics of rounded corners in web design, the reality is you’re probably going to have to implement them some day.

It used to be that rounded corners required four separate images. Then came a clever trick that used just one circular image. But creating rounded corners was still a pain — the task topped our wishlist of CSS features back in 2008. Now, with the arrival of CSS 3, it’s getting much easier to create rounded corners without using any images at all. For people who are into rounded corners, it’s the greatest thing since tabbed browsing.

Of course there’s one big problem with CSS 3 — not every browser supports the whole spec. And some of them (cough, IE) don’t support any of CSS 3′s rules. So while it’s all well and good to create rounded corners with CSS 3′s border-radius, Internet Explorer and Opera won’t render it properly.

For many that might be enough — Safari, Firefox and Chrome will all render rounded corners. Note the actual border-radius rule without the browser-specific prefix, which should cover any future case as well.

Given that rounded corners are generally not a make or break design element, you may be happy to let Opera and IE users see square corners on your pages. If, however, you don’t want any of your users to suffer the horror of angular corners, check out Raasch’s post to see how he solved the problem for Opera and IE.