Rounded Corners

Rounded corners have visual appeal that square ones just don't. Folks have described why we love rounded corners. There will be support for rounded corners in CSS3, and in the mean time, there are several ways to get them now with CSS and javascript:

• Firefox has a browser-specific CSS property for it, but doesn't seem to anti-alias
• Nifty Corners creates extra tiny dom elements to tweak a few corner pixels, but is limited in the size of roundness
• Spiffy Corners even chooses pixel colors so carefully as to effectively anti-alias the corners, but is also limited to radii of 9px or smaller
• And of course there is the good old fashioned manual HTML 3.2 method described as a work around for IE7's lack of rounding support in IEBlog.

This incarnation of rounded corners uses an image server to generate images. They're generated on-demand and served as static content from then on. This means you get anti-aliased, large-radius, cross-browser corners. Want to put them into an email layout that will render in gmail, where styles get stripped? You can do that with IEBlog's manual method and use the image server to avoid minting four new corners each time you change your color scheme.

Ok, but most folks don't see the web through gmail, and I don't usually want to muck with the non-semantic HTML necessary to make that happen. You can get anti-aliased, large-radius, cross-browser corners by applying JavaScript behaviors with CSS selectors. Here's the sample behavior used in this page. You an call it like this:

<script src="http://www.bennolan.com/behaviour/behaviour.js"
 type="text/javascript"></script>

<script src="http://www.oak.homeunix.org/corners/round-corners.js"
 type="text/javascript"></script>

<script type="text/javascript">
    Behaviour.register({
        // 'pre.example' is a CSS selector
        // including the element name boosts client-side performance
        'pre.example': roundedCorners({
            r: 30,           // radius
            bw: 1,           // border width
            bc: '#080404',   // border color
            fg: '#E7D5B7',   // foreground (inner) color
            bg: '#B5945C'    // backgound (outer) color
        })
    });
</script>
      

Invoke this script at the bottom of your html body to ensure that the basic page gets rendered first but rounded corners don't wait for the body's onLoad handler. The onLoad handler must wait for every third-party image and script to load, which can take forever.

Once you get a page working the way you like, you can serve the javascript and images from your own server so that if mine goes down you still have corners. Even my modest hardware delivers 400 requests per second for javascript files and server-cached images.

In case you'd rather decouple your rounded element from its background than have anti-aliasing, the image server can render "transparent" for any of the colors. With transparency, the image server turns off anti-aliasing because it won't look good with GIFs, and PNG transparency still renders white in IE6.

Feedback? Comments? Ideas? Contact me.