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.

Thankfully, the next versions of both browsers, Opera 10.5 and IE 9 respectively, will support border-radius. But in the mean time (and to deal with legacy browsers visiting your site), web designer and blogger Jon Raasch has come up with a handy mix of solutions that creates rounded corners in every browser without resorting to images.

Raasch starts with the best case scenario — browsers that support CSS 3′s border-radius — and creates a pure CSS solution in the form of a class:

.rounded-corners {



    -moz-border-radius: 10px;



    -webkit-border-radius: 10px;



    -khtml-border-radius: 10px;



    border-radius: 10px;



}

    

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.

Sliced bread photo: Emiline220/Flickr, CC

See Also:

• Slick Web Design Gets Easier Thanks to CSS 3′s Transform Tools
• Complex Web Layouts Made Easy With New CSS3′s Flexible Box Model
• Solving Internet Explorer’s PNG Shortcomings with JavaScript
• What’s On Your CSS Wishlist?