CODEWITHSUNDEEP
htmlcss
Luc125
Luc125

Reputation: 5857

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

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,

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

Upvotes: 5

Views: 4257

Answers (4)

James Alarie
James Alarie

Reputation: 11

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

Upvotes: 1

Richard H
Richard H

Reputation: 39055

I would not use the css workarounds/hacks others have suggested here, I would keep to using images. 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 (e.g 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, e.g:

border: 4px solid #f00;

Upvotes: 4

Mark Dickinson
Mark Dickinson

Reputation: 6633

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.

Upvotes: 1

Brett Zamir
Brett Zamir

Reputation: 14345

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

Upvotes: 9

Related Questions