Css rounded div corners

[AdRock]

I am using this code that i found to give rounded corners on divs.

CSS

Code: Select all

.t {background: url(dot.gif) 0 0 repeat-x; width: 200px}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat #E4EFFF}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:3px}

HTML

Code: Select all

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
<img src="images/membership.jpg">
<ul>
<li><a class="one" href="index.php?page=register">Register</a></li>
<li><a class="one" href="index.php?page=login">Login</a></li>
</ul>
</div></div></div></div></div></div></div></div>

I have now got a div with rounded corners and it appears that it has a border but if I add a background colour the border disappears. How would i keep the outside border (say black) and have a different colour inside?

[ukgeoff]

You won't create that ellusion unless you create the round corners in a graphics package with their ouside the curve background colour the same as the colour on the page outside the div.

[moojoo]

CSS3 has a corner-radius call but it is not widely supported, so as stated you will need to use a graphic file or files depending on your needs. I think you are over complicating the process.