Log in

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.

Twey
07-01-2007, 09:05 PM
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">&nbsp;</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.

Twey
07-02-2007, 06:16 PM
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.