Question

i’ve created a layout that contains round corners made with CSS. The corners are displayed correctly, but next to them there are too much pixels.
I checked my graphics, but they do not contain these pixels.

Here’s my CSS-Code:

<style>
div.box {background:url(fld_sel_center_left.png) repeat-y;}
div.box div {background:url(fld_sel_center_right.png) right repeat-y;}
div.box div div {background:url(fld_sel_head_background.png) repeat-x;}
div.box div div div {background:url(fld_sel_buttom_center.png) bottom repeat-x;}
div.box div div div div {background:url(fld_sel_head_left.png) left top no-repeat;}
div.box div div div div div {background:url(fld_sel_head_right.png) right top no-repeat;}
div.box div div div div div div {background:url(fld_sel_buttom_left.png) left bottom no-repeat;}
div.box div div div div div div div {background:url(fld_sel_buttom_right.png) right bottom no-repeat;}

div.content{padding: 40px 10px 15px 20px;}
</style>

and the HTML-Code for the DIVs:

<div class="box">
 <div>
      <div>
           <div>
                <div>
                     <div>
                          <div>
                               <div>
                                    <div class="content">
                                          content<br />
                                           content<br />
                                           content<br />
                                           content<br />
                                    </div>
                               </div>
                          </div>
                     </div>
                </div>
           </div>
      </div>
 </div>

And here you see the problem:

Answer 1

Have you not heard of the border-radius property (for all browser) and CSS3PIE (for old IE)?

Just use:

<div class="content">
content<br />
</div>

then in CSS

.content {
    border-radius:30px;
}

Then read the documentation on CSS3PIE if you need it to work in old IE.