Question

I need to display some content within an area that will have rounded corners. The images associated with these corners are in a single .png file. In an effort to show the rounded corners, I’m using the following:

<table border="0" cellpadding="0" cellspacing="0" style="width:800px;">
  <tr>
    <td style="height:12px; width:12px;background-image:url(/images.png);background-position:108px 48px;">&nbsp;</td>
    <td style="background-color:silver;">&nbsp;</td>
    <td style="height:12px; width:12px;background-image:url(/images.png);background-position:124px 48px;">&nbsp;</td>
  </tr>

  <tr>
    <td style="background-color:silver;">&nbsp;</td>
    <td>My content goes here.</td>
    <td style="background-color:silver;">&nbsp;</td>
  </tr>
</table>

Oddly, there is a thin line between my upper corners and the content. This line does not appear between the middle columns though. At first I thought I was sizing my images wrong, but they look fine. Does anybody have any ideas of what I’m doing wrong or how I can fix this?

Thanks!

Answer 1

Does anybody have any ideas of what
I’m doing wrong?

• Using tables for layout.
• Using an image-based technique for rounded corners.
• Using inline styles (unless you’re using them purely for brevity in asking the question).

how I can fix this?

• Use this HTML:

  <div id="content"></div>
  

• Use this CSS:

  width: 800px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  

We’re using the CSS3 property border-radius, which will work in IE9 and other modern browsers.

If you require rounded corners in older versions of Internet Explorer, you should use CSS3PIE.

It’s as simple as downloading a file, and adding a single line to your CSS:

#myElement {
    ...
    behavior: url(PIE.htc);
}

Live Demo (without CSS3PIE)