Css rounded div corners

AdRock · #1 Aug 5th, 2006, 22:16

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

CSS

.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 · #2 Aug 6th, 2006, 15:09

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 · #3 Aug 7th, 2006, 13:25

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Rounded Corners	Aaron1988	Web Page Design	22	Apr 18th, 2007 19:15
rounded corners question	camcool21	Web Page Design	22	Jan 29th, 2007 18:36
css rounded corners	geoffmuskett	Web Page Design	8	Jan 4th, 2007 20:40
Please Help-->Problem with rounded corners in IE	SuperGrover1981	Web Page Design	6	Jul 8th, 2006 09:24
Rounded corners 1 pixel out in IE	hessodreamy	Web Page Design	1	Jan 17th, 2006 15:44

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Css rounded div corners