Flood

CSS3 Border Radius and Validation: A Deep Dive

13 December, 2010

With the advent of CSS3, rounding the corners of elements on your website no longer requires images or hefty JavaScript. Just a few lines of CSS and voilà, you’re done.

However, imagine my surprise when I validated my style.css file…

For those unfamiliar, rounding corners in CSS3 is achieved using the border-radius property.

Browser Compatibility and Using border-radius

Let’s discuss which browsers support the border-radius property. We’ll focus on the most popular ones: Chrome, Firefox, Opera, and Internet Explorer. Safari and others aren’t considered here.

  • Google Chrome: border-radius has been supported since its first version.
  • Opera: Started supporting border-radius from version 10.5.
  • Internet Explorer: Only supports border-radius from version 9.
  • Mozilla Firefox: Earlier versions required a prefix (-moz-) for this property.

Using border-radius

To round the corners of an element, you simply add the border-radius property in your CSS, like so:

#block {
    border-radius: 10px;
}

This applies a 10px radius to all four corners. If you want different values for each corner, you can specify them individually:

#block {
    border-top-left-radius: 10px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 25px;
}

Alternatively, you can use shorthand:

#block {
    border-radius: 10px 15px 20px 25px;
}

This results in the same effect but with a cleaner code.

Compatibility Issues

  • Chrome: Supports border-radius in all versions.
  • Opera: Supports from version 10.5.
  • Internet Explorer: Supports from version 9.
What about Firefox?

Earlier versions of Firefox did not recognize border-radius. Instead, they used a proprietary -moz-border-radius property. To accommodate Firefox, you had to write:

#block {
    border-radius: 10px 15px 20px 25px;
    -moz-border-radius: 10px 15px 20px 25px;
}

This code works in Chrome, Opera, and Firefox, but it makes the code bulkier. Even worse, when specifying individual corners:

#block {
    border-top-left-radius: 10px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 25px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 25px;
}

The code becomes even more cumbersome if Safari or other browsers with their unique prefixes are considered.

Fortunately, Firefox from version 4.0 and Safari from version 5.0 support the standard border-radius.

Validation Issues

When validating your CSS with these vendor-specific prefixes, you might encounter:

Property -moz-border-radius doesn't exist.
Property -webkit-border-radius doesn't exist.

Some might argue:

W3C is influenced by Microsoft, hence Internet Explorer’s non-standard properties aren’t validated.

However, W3C sets the standards that browsers should follow, not the other way around. The goal is to ensure that the code adheres to a universal standard, even if it means some properties might not validate.

While some developers might dismiss validation as unnecessary, adhering to it ensures clean, error-free code, which is always beneficial.

Conclusion

Using border-radius in CSS3 simplifies the process of creating rounded corners, eliminating the need for additional resources like images or JavaScript. Despite initial compatibility issues with older browsers and the clutter of vendor-specific prefixes, modern browsers now universally support the standard border-radius property. Ensuring your code validates correctly remains a best practice for maintaining clean and efficient code.

Here’s an example for rounded corners that works across all major browsers, considering modern compatibility:

#block {
    border-radius: 10px 15px 20px 25px; /* Standard syntax */
}

If you need to support very old versions of browsers, consider adding vendor prefixes:

#block {
    border-radius: 10px 15px 20px 25px; /* Standard syntax */
    -webkit-border-radius: 10px 15px 20px 25px; /* Safari and Chrome */
    -moz-border-radius: 10px 15px 20px 25px; /* Older Firefox */
}

By focusing on standard compliance and modern browser support, you can create clean, efficient, and forward-compatible web designs.