SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast steviray's Avatar
    Join Date
    Dec 2001
    Location
    Mississippi
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded Corners in CSS

    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

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think it can be done (yet) with CSS. Try graphics (lines as graphics)

    Aaron
    Aaron Brazell
    Technosailor



  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast steviray's Avatar
    Join Date
    Dec 2001
    Location
    Mississippi
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This link may be of interest:

    http://albin.net/CSS/RoundedCorners/

    Paul

  6. #6
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mozilla supports rounded corners now.

    http://www.eightlines.com/neil/mozsk...ozBorderRadius

    Not encouraged of course.

  7. #7
    SitePoint Enthusiast steviray's Avatar
    Join Date
    Dec 2001
    Location
    Mississippi
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    That is indeed what I was looking for!

    Thanks for the link...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •