Rounded corner issues, please advise.

[bgdcham]

Thank you for looking.

Here is the URL for the website I'm trying to fix. My CSS is built into the page for now (will remove it later when there is more content)

http://www.bebemybaby.com/testing2.html

I'm trying to frame (border) most of the content with rounded corners. It's mostly successful except for the top border showing higher up than the rest of the frame and I can't for the life of me get a background to show up that's different from the full body background (the brown color)

This is the coding I'm working with. Please forgive me if it doesn't show up right. I haven't done this in years.


<style type="text/css">

.t {background: url(basic/BGtiny.gif) 0 0 repeat-x; width: 850px}
.b {background: url(basic/BGtiny.gif) 0 100% repeat-x}
.l {background: url(basic/BGtiny.gif) 0 0 repeat-y}
.r {background: url(basic/BGtiny.gif) 100% 0 repeat-y}
.bl {background: url(basic/LBcorner.gif) 0 100% no-repeat}
.br {background: url(basic/RBcorner.gif) 100% 100% no-repeat}
.tl {background: url(basic/LTcorner.gif) 0 0 no-repeat}
.tr {background: url(basic/RTcorner.gif) 100% 0 no-repeat; padding:10px}
</style>


Here is the HTML on the page


<center>
<div class="t"><div class="b"><div class="l"><div class="r"><div

class="bl"><div class="br"><div class="tl"><div class="tr">

<P>

<center>
<img src="http://www.bebemybaby.com/gifs/letter.gif" alt="Bebe My Baby">
</center></p>

</div></div></div></div></div></div></div></div> </center>
<p></p>
<p><center><img src="gifs/babyline.gif" alt="Bebe My Baby

creations"></center><br />
<center><font color="#FE7A7A" size="2">&copy; 2008 - 2009 <a

href="http://www.bebemybaby.com">Bebe My Baby</a></font></center>

Here is the URL I've been following to make the border.

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

I understand that the vast majority of members here are vets of the code, but I'm asking for you to please keep it simple and show me step by step if possible as I have forgotten everything over the last several years as I have been away from coding.

Thank you again.
Ashley.

[Snookerman]

Take a look at this tutorial, it's very helpful:
http://css-tricks.com/video-screencasts/24-rounded-corners/ (http://css-tricks.com/video-screencasts/24-rounded-corners/)

Good luck!

[bgdcham]

Thank you. This problem has been resolved.

[Snookerman]

You're welcome, glad to help!

Good luck with your site!

[ashrafuzzaman]

Hi I initiated a project regarding rounded corner which is browser compatible.
It is explained here (http://jitu-blog.blogspot.com/2009/02/png-corner-is-solution-of-roundedstyled.html)
It uses png images so you will get nice smooth rounded corner with transparency.

[Snookerman]

<table class="roundedCorner" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="top_left"></td>
<td class="top"></td>
<td class="top_right"></td>
</tr>
<tr>
<td class="left"></td>
<td class="content">
The content goes here :)
</td>
<td class="right"></td>
</tr>
<tr>
<td class="bottom_left"></td>
<td class="bottom"></td>
<td class="bottom_right"></td>
</tr>
</table>
Tables should not be used for layout:
http://www.hotdesign.com/seybold/everything.html (http://www.hotdesign.com/seybold/everything.html)