CSS rounded corners without images

There are a lot of techniques for “rounding corners in CSS”:http://css-discuss.incutio.com/?page=RoundedCorners and one of the questions that keep popping up in my search results is how you can round corners without using images.


Most of the people who visit me, having searched for “rounded corners without images” ends up at my “Rounded corners with CSS”:http://virtuelvis.com/archives/2003/08/rounded-corners story – which allows for rounded corners without any markup alteration. This technique, however, requires images.
h3. CSS3
If you want to round corners without using images, that is unfortunately not possible with either CSS1, CSS2 or CSS2.1.
The “CSS3 Border module”:http://www.w3.org/TR/2002/WD-css3-border-20021107 offers a way out, though, through the “border-radius”:http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius properties.
The syntax is as follows:
bc. border-radius:
The two lengths are, for left-to-right and right-to-left scripts, respectively horizontal radius, and vertical radius.
For top-to-bottom scripts, and bottom-to-top scripts, the values are respectively vertical radius, then horizontal radius.
If the second length is omitted, it should be interpreted as being equal to the first property, thus making the corner a quarter circle.
If the second length is set to zero, the resulting corner will be square.
h3. Individual corners
The border-radius may be specified individually for each corner, through the use of:
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
* border-top-left-radius
h3. Browser compatibility
At the time of writing, the border-radius properties are not supported in any browser, since the CSS3 border module is still in “Working Draft” status.
However, browsers based on the Gecko rendering engine (Firefox, Mozilla) has experimental support for the border-radius property, and use the vendor-specific -moz- prefix for the properties, making it -moz-border-radius
h3. Practical use of border-radius
If you absolutely want to make use of the border-radius properties now, and want to maintain forward compatibility, Yous should use both the Gecko specific property, and the CSS3 property. Further, you must restrict yourself to only creating perfectly circular corners, using only one length value:
bc. blockquote {
-moz-border-radius: 2em;
border-radius: 2em;
}
This is because *the Mozilla implementation of border-radius is severely out of line with the CSS3 working draft.* Mozilla accepts up to four length values for the border-radius property, and interprets them as -moz-border-top-left-radius, -moz-border-top-right-radius, -moz-border-bottom-right-radius and -moz-border-bottom-left-radius with one value for each.
At this time, I would go as far as to say that the *-moz-border-radius property should be considered harmful* and that it *should not* be used.
There is a separate “border-radius example document”:/download/218/border-radius.html available.

12 Comments

  1. Oh c’mon, the whole “considered harmful” thing is considered harmful; you have nowhere near enough of a case or thought out argument to use that phrase.
    Vendor specific properties are there _because_ they’re severely out of whack with the spec (and/or because the spec isn’t ready for implementation yet).
    A good argument can be made that no vendor specific properties should ever be used. I’d even agree mostly with that.
    My current thinking is that this is true for all sites except the few you are willing and able (for several years into the future) to update immediately and drastically if the vendor specific implementation changes; such as for example was necessary for all the people who used -moz-opacity in the olden days.
    (And ideally you should give a warning in the code so that less knowledgeable people don’t blindly copy/paste.)
    However, if you do allow the use of vendor specific properties, then there’s no reason to single out -moz-border-radius.
    Also, as the CSS3 Border module is a draft, I would strongly recommend against actually using the actual (non vendor-specific) border-radius property. Maintaining forward compatibility is pretty much impossible when relying on properties only specified in drafts, and attempting to do this, as you seem to recommend, is unwise.
    [Full disclosure: I make heavy use of -moz-border-radius on my weblog.] 🙂

  2. links for 2004-11-21

    PHP blogroll Worth keeping in mind if I get tired of using my current solution. (categories: blogroll blogs howto php) TypOasis (categories: fonts) Practical PHP Programming (categories: howto php) PHP Designer 2005 Ohh this one is free. (categories: …

  3. I don’t think using the vendor specific properties can be considered harmful, I make use of them, exactly as you demonstrate here, on my own site, and have done for quite some time. However, anybody that uses any vendor specific property should be aware that, especially when the implementation significantly differs from the spec, future browser upgrades may significantly alter the implementation, and leave you with undesired results.
    One of the reasons for allowing properties with the vendor prefix is to allow for experementation with, and testing new properties. So as long as anyone using them understands that, and is willing to accept the risks involved, then they are ok to use.

  4. I’m going to quote Anne Van Kesteren from “his linkblog”:http://annevankesteren.nl/archives/href/2004/11 – regarding this very discussion:
    bq. -moz- things are always harmful and should never be used on the web
    The reason I’m singeling out -moz-border-radius is that people seemingly seem to insert this into their CSS, without having read the CSS3 proposal. Which means that they’re going to expect that “border-radius” is going to behave the same way as Mozilla does now.
    Regarding use of CSS3: No – one should not make use of a CSS3 working draft _at all_ without understanding the implications of doing so.

  5. # How can one know whether the individual in question does or does not understand said implications, without convering with him at length?
    # I am not remembered in this log, for some reason… (I’d appreciate a hint)

  6. The best hint that people haven’t read the CSS3 spec is when they use the -moz- version to round one corner only.
    Moose, as for not being remembered, this can happen for a number of reasons:
    # Unlike the standard install of Movable Type, the prefilling of the form does not happen until the page is fully loaded, and if you block onload scripts, the form will not be filled
    # The user info cookie is stored with the “virtuelvis.com” domain, and if your cookie settings prohibit “third-party-cookies” and you access this site from “virtuelvis.com”, your browser might reject the cookie.

  7. Ad 1. This is not user-friendly 😉
    [I browse with JS disabled]
    Ad 2. I have a setting “always ask” for all types of cookies, but neither do I have your cookies on my extensive list, nor am I asked by Opera, as if there were no cookies at all.

  8. Moose: Which is more user-friendly: Forcing you to reload a dynamic page everytime you fetch it, or getting the copy from your browser cache if it hasn’t changed? Now, before anyone protests and says that I could do caching in PHP: Of course I _could_ but I’m not going to – as I’m not going to up my hosting costs with more database or disk space at the moment.
    Because the cookies are handled entirely in Javascript, and you browse with JS off, you will, of course not be asked.

  9. Sander: I’m singling out -moz-border-radius _because_ I’ve seen people implement it without any notion of the implication. Please note that most often when I write “should not”, and especially when I’ve emphasized it, I am using the definition from “RFC 2119”:http://www.ietf.org/rfc/rfc2119.txt

  10. Whatever, Arve. I’m too lazy to type this stuff each time, so I’ll unplug myself from the comments. Adieu, M.

  11. any idea when the CSS3 Border module will be supported by ‘the’ browser?

  12. Boda: The CSS 3 Borders and Backgrounds module is still in Working Draft status, and as such, you shouldn’t expect any browser to implement it soon.
    As for timelines for when the W3C will move this out of WD status, I am not the right one to answer. As for what browser vendors do: I can’t and won’t comment on that.