Skip to content

24 ways to impress your friends

Vote down?

Ben Ward

Worth noting that border-radius is also functioning (with lovely anti-aliasing) in the more recent WebKit nightlies; the next version of Safari.

CSS3 also offers one other way to provide rounded (or any other shape) corners which is also implemented in Safari (since August 2005, apparently): border-image. Rather than position background images, each corner (and edge) has a unique property, which get tiled together around the element.

So:

#box { border-top-left-image: url(topleft.png); border-top-right-image: url(toplright.png); border-bottom-left-image: url(bottomleft.png); border-bottom-right-image: url(bottomright.png); }

3,763