Css rounded div corners

This is a discussion on "Css rounded div corners" within the Web Page Design section. This forum, and the thread "Css rounded div corners are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1  
Old Aug 5th, 2006, 22:16
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Css rounded div corners

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?

Last edited by AdRock; Aug 5th, 2006 at 23:02. Reason: changed code
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Aug 6th, 2006, 15:09
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Css rounded div corners

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Aug 7th, 2006, 13:25
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: Css rounded div corners

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.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
css, rounded, div, corners

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

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


All times are GMT. The time now is 18:59.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42