Full implementation of border-radius

This is a work in progress, but is a pretty complete implementation of border-radius that works way better than any implementation in any browser out there right now. It's done using object-oriented javascript and SVG.

I have made no effort whatsoever to make this work on a wide variety of broswers. It works well on Safari and Opera (last I checked). On Firefox, my sliders disappeared after I tried the new beta 4.0 version. IE doesn't even support SVG, so forget about that.

This diagram viewable only with an svg-enabled browser
Depending on your browser, you may see sliders to play with below.

radius.v: 0
radius.h: 0
border-top-width: 0
border-right-width: 0
border-bottom-width: 0
border-left-width: 0
Right: Bottom: Left:
border-color-top = rgba()
border-color-right = rgba()
border-color-bottom = rgba()
border-color-left = rgba()

As you can see, the implementation isn't quite finished yet, but still looks nicer than what browsers do in a majority of situations.

Drawing operations for sides and corners of the same style are combined for speed and better antialiasing behavior. When all sides match, the entire border is done with a single drawing operation.

The starting color for the border is random.

How your browser currently handles the CSS:


Hire Jerry Seeger

Copyright ⓒ 2010 Jerry Seeger
All Rights reserved until I get that creative commons thing figured out.