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

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;