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.
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-radiuscode 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
solidfor 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
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.
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.
Great idea, but to me, missing anti-aliasing is the biggest drawback in comparison with Mozilla’s own border-radius rendering.