Imageless Rounded Corners

Over the past few years, many web designers have decided rounded-corners improve the layout/usability of their sites. Typically, two techniques are used: using background images with layered elements or simulating rounded corners with elements inserted via JavaScript. Both techniques have a drawback, requiring extra load time for images to download or for JavaScript to execute. It would be nice if browsers had built in CSS support handling the rounding of corners. Fortunately, CSS3 will include a "border-radius" rule to specify how to handle corner rounding. Although no browsers fully support CSS3 yet, there are browser specific rules implementing the CSS3 rounded corners.

Please note however, this technique does not work in IE (not even 8), and it is not yet supported by Opera (latest version is 9.64), although it should be supported soon. I recommend gracefully degrading (no rounded corners) in these browsers, as site performance is paramount to maintaining users and todays technique is much faster and more versatile than other methods. However, if rounded corners are a must in IE, then I suggest reading, Rounded Corners in Internet Explorer, and implementing an IE version using SVG or PNG.

That said, in CSS3 developers will be able to use the following rounded corners rules:

Example 1: CSS3 Rounded Corners Rule

border: 1px solid #F00;
border-radius: 5px;
/** specify horizontal  and vertical radii */
border-radius: 5px 10px;
/** below target a specific corner */
border-top-left-radius: 5px 10px;
border-top-right-radius: 5px 10px;
border-bottom-left-radius: 5px 10px;
border-bottom-right-radius: 5px 10px;

First, with all the rounded corner rules discussed today, the border rule is optional. If the developer does not specify a border, the element will still be rounded but with an invisible border. When the border is specified then then a line of the provided color and style will surround the element and round as well.

The border radius can be defined in two different ways: a single value indicates that the corner(s) should be rounded evenly, while two values indicates that the corner(s) will be rounded with the first value being the horizontal distance and the second value the vertical from the center of the curve. A developer may also target a specific corner by using "border-top/bottom-left/right-radius" instead of "border-radius". For more information on the border radius, see the W3C specification.

That said, "border-radius" does not work as defined in any of the major browsers. Instead you will need to use browser specific versions:

Example 2: Browser Specific Border Radius Rules

border: 1px solid #F00;
/** web-kit (safari/chrome) */
-webkit-border-radius: 5px;
-webkit-border-radius: 5px 10px;
-webkit-border-top-left-radius: 5px 10px;
-webkit-border-top-right-radius: 5px 10px;
-webkit-border-bottom-left-radius: 5px 10px;
-webkit-border-bottom-right-radius: 5px 10px;
/** konquerer */
-khtml-border-radius: 5px;
-khtml-border-radius: 5px 10px;
-khtml-border-top-left-radius: 5px 10px;
-khtml-border-top-right-radius: 5px 10px;
-khtml-border-bottom-left-radius: 5px 10px;
-khtml-border-bottom-right-radius: 5px 10px;
/** possibly opera */
-opera-border-radius: 5px;
-opera-border-radius: 5px 10px;
-opera-border-top-left-radius: 5px 10px;
-opera-border-top-right-radius: 5px 10px;
-opera-border-bottom-left-radius: 5px 10px;
-opera-border-bottom-right-radius: 5px 10px;
/** gecko (firefox/) */
-moz-border-radius: 5px;
-moz-border-radius: 5px 10px;  /* !IMPORTANT! rule doesnt work */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;

For the most part the browsers have chosen to append their identifier to the front of "border-radius" and mirror the W3C specifications. Mozilla chose not to do this, changing the way developers target corners (topleft, instead of top-left) and not supporting the use of two parameters for a rule; all corners must be uniformly rounded in Mozilla. I recommend rounding corners uniformly in all browsers, anyway, because they look better.

I have written a Demo Page to show how to use these rules. The outer element has the upper left corner rounded to "10px 20px" (notice that the rule is not applied in FireFox) and the bottom right corner rounded to "10px"; no border style is specified. The inner element has all corners rounded uniformly to "10px" and a dashed, red border.

Using Ant to Consolidate CSS and JavaScript

Given the increasing complexity of the JavaScript and CSS code used to drive websites, it is ever more important to optimize for performance. A great tool to help with site optimizations is YSlow, and one of its recommendations is to consolidate CSS and JavaScript files into the fewest number of files as possible. This is because all browsers have limitations on the number of requests they can make to the server to retrieve files ...

The New IE PNG Fix

I have been using the iepngfix.htc tool for years, allowing me to correct IE6s lack of support for alpha transparencies in PNGs. The tool is called via a CSS behavior, which loads the HTC file containing JavaScript that searches the CSS for PNG backgrounds and automatically applies the IE6 transparency filter. So once the page loads, the PNG background images are corrected. There is a slight flicker as the correct happens, but it is ...

Absolute Positioned Layer

In my projects, I frequently find the need to absolute position a div somewhere on the page (on Mint.com we things like position popups and autocomplete/menu widgets). At one time absolute positioning elements was a real chore, as browsers treat absolute positioning differently, depending on where the element is in the DOM and the positioning of the parent elements (more on positioning: Position Everything). I needed a technique to that allowed me to ...

CSS: Using Percent for Margin and Padding

For Mint.com, Jason Putorti and I are refactoring the way we do CSS graphing to support positive and negative values, where the bars are all scaled using percentages, so the design can change without any re-engineering. Hopefully, Jason will write a guest article about this soon, but until then, this development inspired todays article. In our graphs, the negative bar needed to be offset by the height of the positive region, and initially ...

CSS List Boxes Improved

I came across a slick CSS List Box widget the other day and wanted to share it. The original page was done by Mike Cherim, CSS: List Boxes. I liked how relatively simple the HTML and CSS was, plus the design was very visually appealing.

Example 1: Modified HTML

<div class="clb-shell"> <h3>Web Services (List Boxes Example)</h3> <p>We offer a variety of web services for our customers. Our services include:</p> <ul> <li> <h5><a href="#">Web ...

Faux Columns

This past week has been really crazy: 3 Christmas celebrations, 1 Birthday, and family staying over for the last 3 days. Consequently, I have not succeeded in a finishing my xJson Object article. So instead of discussing xJson, today we will discuss a simpler, but very useful technique, known as Faux Columns.

The Problem:

If you have ever tried to design a two-column layout without using tables, you should know that the two columns (by ...

Semantic Star Rating HTML Widget

I am going to deviate this week from the Json Object discussion, as I have not had any time to work on it. Instead, I wanted to share a technique you can use to write semantic HTML for a rating system. If you have ever used a site like Amazon.com or Yelp.com, then you are familiar with the star rating system (0 stars = worst rating, 5 stars = best rating). However, most rating systems ...

Standard Tabs

I was off last week, taking a much needed break. Of course, instead of really relaxing, I decided to play with a PHP framework that I have been tuning and instead laid the foundation for a web-based stuff management system (I have too many books and DVDs to remember what I own anymore). Anyway, this project gave me a good opportunity to build a website from the ground up, adhering to standards and accessiblity. Over ...

Web 2.0 Tabs

Jason Putorti of Mint.com and Novaurora, designed some cool graphical tabs for Mint. Although, they are not bullet proof (yet), they are very close. Angel Grablev reverse engineered this technique and wrote about it here:

Amazing CSS Tabs for your website (mint.com inspired)