13 Apr

curved corners using CSS3's border-radius, and a little JavaScript

I created a hack recently which generated corner curves using a custom background image.

When I showed it to the in-house designers here, they commented that it was too slow, and there was an annoying few seconds where the entire background of the affected areas was blank.

So, I thought about it, and came up with a different method – check this out. It’s a pure JavaScript method, which generates the curves a pixel at a time.

This works in IE6, Firefox1.0.2, and KDE3.4. It may work in others, but those are the browsers I tested it in.

The script has the following good points:

  • No messy CSS hacks. Just write your border-radius code as normal.
  • No long delay as a custom background is fetched.

The script improves over Firefox’s own rendering in that it:

  • is compatible with the W3C’s CSS3 standard for border-radius, which indicates that a corner may be elliptical, and not just circular.
  • doesn’t leak images! At the moment, Firefox’s rendering of border curves breaks if you have a background image. I’ve tried fixing it myself, but it will take a bit of work – a lot of work, actually.

Of course, it’s not all good news. The script has the following failings (noted so far).

  • Curves that use a background image render slowly in IE6, because IE6 does not seem to check its local cache for CSS-called images.
  • The border style used at the moment is solid for all sides. While this may be okay for most people, it’s annoying to me.

My plan for this script is to get the border styles working properly with dashed, double, and dotted styles, then rewrite the Firefox border-rendering code using the algorithms I’ve developed. It should hopefully shut a few bugs down from Bugzilla.

4 thoughts on “curved corners using CSS3's border-radius, and a little JavaScript”

  1. Dylan Parry -

    Hi Kae,Concrats on getting married! I presume that you won’t reply to this very quickly, but here goes :)I’ve been looking at the CSS/JavaScript solution located at http://demo.verens.com/borders/borders.html and I tried to copy the code for use on a page I am working on. For some reason I can’t seem to get anything I try to work in IE6 — it gives me a scripting error each time. Something along the lines of part1.2 not an object or something :)Is there any chance you could put together a quick zip file for me along with an example of a div with a pretty simple curved border?The bit I like best about the script on that page is the anti-aliasing that it appears to do! It’s fantastic. Is the code on this page the same though? It appears to be, but the anti-aliasing effect doesn’t seem as good :sCheers,Dylan  

  2. Kae Verens -

    I replied to Dylan privately, but thought that he raised some good questions. The object error was caused by IE not having a native XMLHTTPRequest object. The examples in this article did not have anti-aliasing (I wrote the anti-aliasing at a later date).

    In fact – just run a search on this site for “css3 border-radius”, and read the most recent article on this hack. There have been quite a few improvements.

  3. Ronny -

    Great idea, but to me, missing anti-aliasing is the biggest drawback in comparison with Mozilla’s own border-radius rendering.

Comments are closed.