View Full Version : Rounded Corners
xkyogre
07-01-2007, 04:12 PM
I heard somewhere that you can create round corners on tables and stuff using css. Is this really possible?if so how can you do it?
thetestingsite
07-01-2007, 05:06 PM
Google is your friend. Here are a few sites that talk about CSS Rounded Corners:
http://www.google.com/search?q=CSS+Rounded+Corners&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
and here is an online genorator:
http://www.roundedcornr.com/
Hope this helps.
Since this effect isn't vital, I'd suggest increasing readability by using a script like this one (http://www.html.it/articoli/niftycube/index.html).
Paul Keely
07-02-2007, 05:16 PM
First off, go to: http://wigflip.com/cornershop/
Then, when you have your images, use:
HTML:
<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
<div class="clear"> </div>
CSS:
.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.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:10px; text-align: center}
.clear {font-size: 1px; height: 1px}
And that should do you nicely.
It would work, but is less than optimal, since it requires images (these will have to be transparent PNG images in some cases, which brings in the whole IE6 issue on top of the added bandwidth) and bulk markup that's essentially presentational.
You probably mean line-height there rather than font-size, too.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.