There are lots of different techniques for rounding corners. To name a few off the top of my head: tables with 4 images; styling the container and a header; doing that in JS; multiple backgrounds in CSS3 and finally browser specific CSS. I find myself just using -moz-border-radius and -webkit-border-radius because it's the easiest way. Of course any IE users won't see the effect.

What is the best way to do rounded corners? By best I mean cross browser and easy to implement.

9 answers

8
points
This was chosen as the best answer

Something else to think about:

As far as sticking with advanced methods, despite backward compatibility, looking forward it's important to remember (or so i've read) that in the future, party-specific attributes may not always stick around. So to be super safe, include this:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

So it's basically like adding in all the various methods of opacity for all of the flavors of browsers but very forward thinking. The day browsers mostly support border radius using a basic border-radius declaration, it will already work and you'll be able to strip out the old browser specific code.

Answered almost 5 years ago by Luke Dorny
2
points

I use border-radius for browsers that support it and for those that don't, I've been using this handy script: http://www.dillerdesign.com/experiment/DD_roundies/.

Answered almost 5 years ago by Jeff Smith
  • Hey Jeff, even I'm doing the same, i.e. using border-radius for browsers that support it, for IE I'm using DD_roundies in a prototype for an app we are developing, I'm not yet sure how it's going to impact the actual development though the prototype testing has created no issues as yet. I really hope so that development phase is not impacted, else I'll have to think of an alternate solution. BTW all these rounded corner workarounds available, create a set of divs around the corners - to create the round curves, and these extra divs may be an hindrance Andrews almost 3 years ago
2
points

I'd say if you're going for A-grade support then background-images (in a sprite, of course) is the way to go. DD_roundies is nice and all but it's going to make pages even slower in IE. Larger sites that care about performance really should never use a JS method for simple layout issues.

On the other hand, I can highly recommend DD_roundies for smaller scale sites, especially ones with less complicated designs as it can save you a chunk of production time. Be sure to wrap the script tag in an IE conditional and be aware of what mode IE8 thinks it's in.

For references on efficient ways to code flexible rounded corners with images, I've found that the Modules section of OOCSS to be very good. You can find it here. And just in case you've never come across GitHub before, that's just the documentation. You'll need to download the OOCSS framework (it's small) to see the actual Modules page.

Answered almost 5 years ago by Dylan Harrington
1
point

If your site is already using jQuery, try the jQuery Corner plugin.

Answered almost 5 years ago by Bart Byl
1
point

we're starting to use -moz/-webkit/border-radius on some elements in order to reward advanced browsers, with the thinking that it's not degrading the site. i really think it's a design problem, rather than a technology problem, at this point. a good strategy is to design in such a way that the lack of round corners will not take away from the design or impact usability, and then it can be added for browsers that support it.

if it has to have round corners in ie, then i would use background images in cases where you have fixed-width columns. it's simple to set up sprites that provide the widths you need, and then structure your css such that you have a simple way to apply the proper image positioning.

if you have a liquid layout or elements that must stretch, then i'd use js or absolute multiple elements in the div to set it up. it's never clean, though, so my first approach, again, would be to design around it.

Answered almost 5 years ago by River Bandon
0
points

Pure html and css. Nifty Corners. http://www.html.it/articoli/nifty/nifty1.html

Answered over 4 years ago by VagrantRadio
0
points

curved-corner is nice too. I imagine it's similar to Roundies. I'm also keen on just not showing the rounded corners to IE6 and earlier, but you can't always do that.

Answered about 4 years ago by Gavin Cheyne
0
points

For IE I use DD Roundies. Basicly you include an .js file and give a class to the div you want your rounded corners on. For example http://projects.webfizz.be/rounded/test.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <script src="roundis.js" type="text/javascript" charset="utf-8"></script>
    <script>
      DD_roundies.addRule('.rounded', '50px');
    </script>
    <title>untitled</title>
    </head>

<body>
<div id="test" class="rounded"> Some content in a rounded box. </div>

</body>
</html>

I also tried it out with an htc file: http://projects.webfizz.be/rounded/

Here you only have to add this to your css file:

-moz-border-radius:7px;
-webkit-border-radius:7px;
behavior:url(border-radius.htc);

More info on ddroundies More info on htc file

Answered over 4 years ago by Simon Hellin
-4
points

Basically, the only guaranteed way you're going to get rounded corners for cross-browser is to use a DIV construction using background images for the corners. Although even this could have issues Pre-IE7.

I generally use -moz/-webkit in user interfaces where rounded corners don't really matter and where time is of the essence ;)

Answered almost 5 years ago by Jake Holman