How can I make rounded corners on non-CSS3 browsers?

Question

I know that I have to use images in this case, one per corner.

For example if I need a solid blue 4px border with 8px border radius around a given element, and I have designed four images accordingly,

• top-left-corner.png
• top-right-corner.png
• bottom-left-corner.png
• bottom-right-corner.png

How should I implement this, if possible without using a table?

Answer 1

Have you tried http://css3pie.com/about/ ? You don't have to use images in such a case...

Answer 2

I would use the css workarounds/hacks others have suggested here, I would keep to using images. 使用其他人在这里建议的css变通/ hacks，我会继续使用图像。 Yes it's more fiddly to set up but it is cross-browser and robust. I have tried a number of these css workarounds and have found them to be unpredictable at best. They might work fine on some IE installs, but not on others (eg completely crashing the browser). And worse we were unable to isolate why it worked fine on some installs, and not on others (and this is for the same IE version).

I would either: live without curved corners on IE, or use images. You can use nested divs:

<div class="top-left">
   <div class="top-right">
       <div class="bottom-left">
          <div class="bottom-right">

             ... content ...
          </div>
       </div> 
    <div>
 </div>

and in css you set the appropriated background-image for each class, something like this:

div.top-left { background: url('/top-left-corner.png') left top no-repeat; }

and set the border style for one of the divs too, eg:

border: 4px solid #f00;

Answer 3

There are so many links to this on google, just type rounded corners css and you should find something to help. Older techniques involved using something like a set of b tags above and below the box you want to round off and stting the margins to produce the radius you need, but it gets a bit involved and there are better antialiased solutions available.

Answer 4

If you allow tables and some code, you can do it without images and easily switch colors:

http://spruce.flint.umich.edu/~jalarie/jaa_kcm.htm