Round corners with CSS

[gpeters]

I have problems creating round corners with CSS

The right top, right bottom and left bottom corners show up on the most outer part of the website. See attachment

Here is the html code


<div id="contact">
<span class="trr"></span><!--top_right-->
<h2>Contact Us</h2>
<p>Call us <strong>Toll Free at 888-888-8888</strong> or <strong>Toronto Local 555-555-5555</strong>, send us an <a href="../html/contact_form.html">email</a> or go to our <a href="../html/contact_us.html">Contact Us</a> page for more details.
</p>
<span class="bll"></span><!--bottom_left-->
<span class="brr"></span><!--bottom_right-->
</div>


CSS code



#contact {
background-color: #DDDDDD;
width: 165px;
padding-left: 21px;
padding-right: 10px;
padding-top: 1px;
float: right;
margin-top: 10px;
background-image: url(../images/tl.gif);
background-repeat: no-repeat;
}

.trr, .bll, .brr {
width : 20px;
height : 20px;
display : block;
margin-bottom : -1px;
position: absolute;
}

/* change position and image: top-right */
.trr {
background : url(../images/tr.gif) no-repeat;
top : 0;
right : 0;
}

/* change position and image: bottom-left */
.bll {
background : url(../images/bl.gif) no-repeat;
bottom : 0;
left : 0;
}

/* change position and image: bottom-right */
.brr {
background : url(../images/br.gif) no-repeat;
right : 0;
bottom : 0;
}


Any ideas why?