Hackszine.com: Cross-browser rounded vector corners

Cross-browser rounded vector corners

As a web developer, I've been patiently waiting for the designer community to finally decide that rounded corners and drop shadows are out of style. I've been waiting since about 1999 so, uh, you know, any day now guys. I'll just be waiting here in web developer hell trying to construct a cubic igloo.

There are a number of tricks for creating roundtangles, from nesting a bunch of divs with background images, to jQuery scripts that will dynamically build successive 1-pixel-thick divs to render the corners. Today, I came across another method which simulates the CSS 3 border-radius vector corner effect in most browsers, using a little bit of conditional HTML and a bunch of browser-specific CSS properties.

You'll have to check the source on the linked page below to see how it's done, but basically VML is used for IE support, and the -moz-border-radius and -webkit-border-radius properties are applied for Firefox and Safari users.

It wouldn't be a difficult task to simplify this a bit with jQuery and roll all of the necessary markup and css tweaks inside a single class target.

HTML/CSS Vector Corners

Posted by Jason Striegel | Aug 19, 2008 09:06 PM
Design, Web | Permalink | Comments (0)