Adding rounded corners to an object in your HTML should be easy. Heck, open up Photoshop or your favorite image editor and it is easy to around rounded corners to any rectangle you create. When it comes to creating Web pages it is a different matter. Creating rounded corners to a block of text, a tab or a background is not easy. The only effective way to add a rounded corner is to create a HTML table with image files that look like corners. This is a lot of work and not very easy to update. HTML5’s update to Cascading Style Sheets, CSS3, now supports a new feature that allows you to added rounded corners to elements in your HTML. Rounded corners suddenly have never been so easy.

In this article you will learn how to use CSS to created rounded corners to rectangles without having to use a complex image cheat.

Using Cascading Styles Sheets to Create Rounded Corners

As the name implies, a Cascading Style Sheet, or CSS, is a document that describes the visual style of your content. Web designers have been leveraging Cascading Styles Sheets as a tool to control content placement and text presentation in web pages for over ten years.

With the advent of Web 2.0 applications, it is even more important to add control to your designs. The Webkit open source project, used in Apple’s Safari and Google’s Chrome, and Mozilla’s FireFox, recognize that CSS must be flexible enough to meet your design needs. To this end, there is now included in the latest versions advanced CSS styles. One of these new features is the ability to add rounded corners to objects. More recently, the Opera Web browser has also adopted support for CSS3 rounded corners. Adding rounded corners is not a new technique for the web. You see it all the time when you look at web sites. You can see rounded corners being used on own InsideRIA.com Web site:



The effect, however, is created using images and tables to create the illusion of rounded corners. Adding in more HTML and images to the Web ensure it will take longer to load and makes modifying the page later more complex.

A simpler approach is to use the proposed Corner-Radius CSS definition that is currently supported in FireFox 3.0, Safari 3.0, Mobile Safari on your iPhone/iPod Touch and Google’s Chrome. The Corner-Radius definition is line you can add to your CSS style. The following HTML code has a style embedded that changes the presentation of the block of text to have rounded corners with a heavy, black outline:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, lacus in cursus cursus, justo purus fringilla nisi, quis cursus urna velit vel felis. Nulla ac mi. Phasellus sodales dui vel tortor. Praesent dignissim. Vestibulum vulputate nibh rutrum purus. Nulla ante. Sed porta. Vestibulum commodo, mi nec tincidunt laoreet, urna risus ornare libero, in imperdiet sapien enim vel nisi.

he style description has been highlighted in bold with an Orange color border. Your content will now look like this on your Web page:



As you can see, the block of text now has a solid red line with rounded corners. It is this style description that controls the size of the radius, not an image. You can then easily modify the description as shown below:

-moz-border-radius: 10px -webkit-border-radius: 10px border-radius: 10px

The standard is currently only in proposal stage and has not been adopted by all Web browsers. For this reason, you need to use three border-radius style descriptions: One, for FireFox (-moz-border-radius); and one for Safari/Chrome (-webkit-border-radius) and one for Opera and other browsers who are supporting syntax structure that will appear in the final draft of the CSS3 standard. Changing the value of the border-radius will change the size of the border. For instance:

Border-radius: 15 px



Border-radius:25 px



Border-radius:45 px



As you increase the border radius, you will also have to add additional styles, such as padding, to ensure that your border does not cut through your text as is shown in the example of border-radius:45 px. Here is how you can add padding to manage your style.



The content now looks like this:



Creating interactive tabs

The new border-radius style also has the option of allowing you to control which corner you want the border to appear on. This can be useful when you want to create tabs for you web page. For instance, the following style will add tabs to the top left and top right corners:



In the above style description we are using the border-radius-topleft and border-radius-topright radius description. In this instance, you are only controlling the radius of the corners along the top left and right. The bottom corners will remain normal 90 degree corners.

This style can now be added to a central style sheet link to content on your page. The content on your page can now reference the style. You can add the following HTML to see this effect: This is Tab 1This is Tab 2This is Tab 3 When you view the page, the HTML above will look like this:



As you might imagine, you can inherit existing CSS formatting into your border-radius designs. For instance, you can add a simple roll over effect when you include the following style description. The important part is to add the “:hover” parameter. This instructs the Web browser to only use this style when a user is rolling over the link with their mouse:

The action looks like this:



Without using complex images or tables, you have created a series of tabs that can be easily managed through your CSS and HTML.

Adding Rounded Corners to Form Controls

Rounded corners can also be added to HTML form elements. This enables you to add visually engaging effects to your forms without having to leverage 3rd party solutions such as jQuery plugins. The less content you have on your Web page, the faster it will load. This is not so critical for web sites running on desktop computers, but speed is an issue for netbook, tablet and mobile browsers that are running stripped down CPUs.

Below is a screen shot of a simple form. Nothing too fancy, just your plain old drop down menu, text area and submit button.



The HTML used to create this image is:



The following CSS style is a simple example of rounded corners in Form elements, again nothing too fancy:



Using the class attribute in your HTML, you can link the HTML in the form to the style are shown below:



Adding the CSS rounded corner style transforms your form in the following image:



You can also mix up your CSS and add different radius styles to each corner.



The following image illustrates what your Web page will look like using the mixed up rounded corner definitions:



Again, this effect is created without using a single image or a jQuery plugin effect.

Using rounded corners with HTML5

Rounded Corners is part of HTML5. As you can imagine, it would be frustrating if the radius CSS specification did not work with the new HTML5 elements. Well, rest easy, Web developer, the new HTML5 elements, such as the Article and Section element, do work with rounded corners. The following HTML is valid HTML5 code you can use in modern Web browsers such as Google, Safari and FireFox:



With no CSS this HTML is very plain:



Using the following style sheet you can quickly dress up your HTML5:

Each HTML5 element, the Aside and Section elements, now have their own styling. In addition, traditional HTML elements, such as the Anchor, H1 and Paragraph, can also be stylized. You see the result in the following image:



An advantage of using the CSS styling with HTML5 is that you do not need to lean on traditional layout controls such as DIV elements, which can become difficult to manage in complex page designs.

Advanced elliptical control with Rounded Corner Control

Up to this point the rounded corners that have been creating are uniform in shape. The radius definition, however, is set up to give you control over the elliptical shape of your radius. There are two parts to a radius, the X and Y. You can modify the length of both by splitting the values of X and Y radius as follows:

-moz-border-radius: 100px / 40px;
-webkit-border-radius: 100px / 40px;


The following image shows that the radius along the rectangle has their ellipsis modified.

The definition will also allow you to add a string of definitions for the X and Y value of the radius to control each corner. For instance, the following radius definition will add different radius definitions for each corner of a rectangle:

-moz-border-radius: 150px 50px 50px 36px / 12px 30px 30px 12px;

The result looks like this:



The radius-bottomright, radius-bottomleft, radius-topright and radius-topleft and be used as substitutes for this style description.

What would Microsoft Do? The problem of IE8

Applying rounded corners to your design is a must for almost any Web site. There is a big caveat: NO SHIPPING VERSION OF MICROSOFT’S INTERNET EXPLORER SUPPORTS CSS CORNERS. Microsoft does a good job of talking up their support for CSS, but what they fail to mention is their lack of support for CSS3 standards. Unfortunately, this is a big caveat for many designers as 60% of all Internet users are coming to your site using Internet Explorer.

So, how do you design your Web site to support rounded corners with IE8? There are several good solutions.

The first solution I have used is Curvy Corners at http://www.curvycorners.net/. The Curvy Corners solution is looking to bridge the gap between CSS3 radius supported browsers (FireFox, Safari, Chrome) and the browsers who do not - yep, that’s IE8 I’m calling out.

Using Curvy Corners could not be easier. Layout your CSS as you would for FireFox or Chrome -webkit-border-radius and -moz-border-radius definitions in your style sheet. Web browsers that use WebKit and Mozilla Open Source projects will render the page using the CSS. The Curvy Corners JavaScript will not even kick in. For IE8, Curvy Corners JavaScript library will kick in and replace the CSS radius definitions with DIV tags that include rounded corner images files. Curvy Corners is easy to use and, for most web pages, works great. Rounded corners can also be added to your page using Ajax libraries such as jQuery. The downside to this solution is that you are not using CSS, but it will get the job done. The final method is to create complex HTML Tables with images for corners. Not easy and very difficult to update.

IE9 CSS3 Rounded Corners Support

While IE8 only supports very few of the features proposed for HTML5 the current Web browser does have very good CSS2 support. OK, this article is focused on CSS3/rounded corners so why should you care about CSS2, right? There are good reasons for this. Implementing CSS3 is much easier when your base support is solid.

The PDC demonstration of Internet Explorer 9 showed of several new features such as Direct2D interface, better font rendering and, more importantly, rounded corners. Yes, sir, Microsoft is coming to the HTML5 party and will be supporting the radius description in CSS3 to give you rounded corners.

The demonstration at PDC highlighted that Microsoft will be using the final, published syntax for radius not a modified version with a ms- prefix as is currently used for Safari/Chrome and Firefox with webkit- and moz-. Therefore, the following will be valid for IE9:

border-radius: 15px;

Ideally, all Web browsers will support the published syntax. This will make it much easier for designers.

If you want to start to using corners in CSS then target Web sites for Mobile browsers as Android’s mobile browser or Apple’s Mobile Safari found on the iPhone. These browsers already support rounded corners. This means you already have an audience you can target without having to worry about whether or not they are using an older Web browser. Now is the time to start using CSS rounded corners with the radius definition.

Read more from Matthew David.