POST 100 - Pure CSS for Rounded BOX Corners

[! search-engines-]

http://www.spiffycorners.com/sc.php?sc=round&bg=808080&fg=3333ff

http://digg.com/design/100_CSS_Rounded_Corners_WITH_anti-aliasing._No_images._No_JavaScript.


Ever wanted to try Rounded Corners instead of Square Tables

Here is cut and paste CSS

[Chris]

nifty

[Mike]

That could come in handy, thanks for the link :)

[deronsizemore]

For that spiffy corners one...I'm kinda lost. I am pretty decent with CSS, no expert or anything, but I'm having trouble understanding how they get the rounded corners without images? I don't see any bg images or anything there. (I've not messed around with the code at all...this is just my observation).

[Sean]

What they do is use a series of 5, 1px div's above and below the content div. They get the anti-alias by using border left and right colors on the 5 div's.

[Ben]

That is pretty awesome. I am definately bookmarking this site for future reference

[deronsizemore]

What they do is use a series of 5, 1px div's above and below the content div. They get the anti-alias by using border left and right colors on the 5 div's.


Ah, I see. Seems you could almost be better off simply using bg images in the style sheet and not have all that code bloat with the 5 divs? Maybe not.

[James]

You'd definitely be better off with images, if just for the fact that this increases your chance of browsers not rendering it correctly.

Still, it is nifty. If you want another way, search for Alistapart's "Sliding Doors of CSS" article.

[deronsizemore]

You'd definitely be better off with images, if just for the fact that this increases your chance of browsers not rendering it correctly.

Still, it is nifty. If you want another way, search for Alistapart's "Sliding Doors of CSS" article.


I think I have that bookmarked somewhere....I'll have to check. Thanks