Pure CSS Rounded Corner, No Images

by Yang Yang on March 4, 2011

Though it does look great, I haven’t given it a try until the other day when I was developing smartbabynames.com. Notice the previous and next link immediately below the boy image at here:

http://www.smartbabynames.com/meaning/boy/Langleigh/

They look and feel great.

So here’s what I’ve done to achieve the rounded corner box in pure CSS – no images nor whatever. Just CSS:

.rounded {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;
}

Tested across major modern browsers other than IE. Sure it doesn’t work in IE6, but not sure if it works in IE7, IE8, IE9, etc. But let me know if you know.

Cassidy James March 9, 2011 at 1:05 am

It doesn’t work in IE, as IE doesn’t support CSS3 yet. IE9 is bringing some support for it, and I believe border-radius is supported.

Comments on this entry are closed.

Previous post:

Next post: