I know that I'm behind the times... but rounded corners without using images on web pages

Published 21 February 07 06:05 | Simon Phillips

Looks like I'm a couple of years behind the trend, but I've had it pointed out that you can achieve nice rounded corners on web pages without using images.

There are possibly buckets of articles about this on the web, but these are the solutions that I've come across and implemented.

Nifty Corners / NiftyCube by html.it - Nice articles about how to achieve this by using HTML markup and CSS followed by a complete solution using a Javascript functions to apply the additional markup to any element.

RUZEE.Borders by ruzee.com - Used in a number of the blog template on Community Server, some nice additions like adding glow and fade effects.

If you have any other examples the please leave a comment!

Filed under: , ,

Comments

# paulanthony said on February 23, 2007 10:25 :

Although its not image free -theres also an interesting implementation of this sort of thing over at 456 berea street. Use of PNG backgrounds to get shadows behind the boxes.

http://www.456bereastreet.com/lab/transparent_custom_corners_borders/

I'm not sure that I'd be 100% comfortable using javascript for design elements. Call me old fashioned, but I know Nifty Corners breaks on the earlier Firefox versions even with js turned on.

Spiffy Box takes some of the pain of putting these things together, although its not semantic. Roll on CSS3 support.

http://www.spiffybox.com/

This Blog

Applications / Addons

Irish Community

Microsoft Ireland Blogs

My Articles

Syndication