Rounded Corners in CSS

**steviray** · Jan 12, 2003 00:46

I'd like to use a tableless layout, if at all possible, but am having a problem using rounded corners... to smooth out the page. Below is what it looks like placed in a table: (like you all wouldn't know how it would look... hmphhh!)

Code:

<table width="765" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr bgcolor="#b2c4c2"> 
    <td height="25" colspan="5" background="images/grngrad_navbar_180.gif">&nbsp;</td>
  </tr>
  <tr> 
    <td width="10" rowspan="3" bgcolor="#b2c4c2">&nbsp;</td>
    <td width="20" align="left" valign="top">
<img src="images/tpleft.gif" alt="corner image" width="20" height="20"></td>
    <td width="745" align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="20" align="right" valign="top">
<img src="images/tpright.gif" alt="corner image" width="20" height="20"></td>
    <td width="10" rowspan="3" bgcolor="#b2c4c2">&nbsp;</td>
  </tr>
  <tr> 
    <td width="745" height="125" colspan="3" bgcolor="#FFFFFF"></td>
  </tr>
  <tr> 
    <td width="20" align="left" valign="bottom">
<img src="images/btmleft.gif" alt="corner image" width="20" height="20"></td>
    <td width="745" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="20" align="right" valign="bottom">
<img src="images/btmright.gif" alt="corner image" width="20" height="20"></td>
  </tr>
  <tr bgcolor="#b2c4c2"> 
    <td height="25" colspan="5" background="images/grngrad_navbar.gif">
    </td>
  </tr>
</table>

Would someone help guide me how/if *the above* is/can be done using <div>'s and CSS?

TIA,
Steve

**Technosailor** · Jan 12, 2003 01:33

I don't think it can be done (yet) with CSS. Try graphics (lines as graphics)

Aaron

**blufive** · Jan 12, 2003 03:09

It can't be done - YET.

There are new properties in CSS3 to allow this sort of thing. border-radius will allow you to do elliptic rounded corners without images. There are also properties to allow image borders in pure CSS (no table).

Check out the CSS3 border module working draft for details.

But since many of the leading browsers haven't sussed out CSS2 properly yet, don't hold your breath.

**steviray** · Jan 12, 2003 04:24

Ahemm... Thanks Aaron & Gav!

Nothing like wishing, I suppose. I figured it might could be done with absolute positioning or something.

Back to tables for that portion... *ducks for cover*

Steve