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
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
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?
Bookmarks