CODEWITHSUNDEEP
css
user609886
user609886

Reputation: 1669

rounded corners with CSS creates a line

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!

Upvotes: 0

Views: 2386

Answers (1)

thirtydot
thirtydot

Reputation: 228162

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)

Upvotes: 3

Related Questions