How to Create Rounded Corners for Your Box Borders in CSS

How to Use Border-Radius to Create Rounded or Curved Corners


How to Create Rounded Corners for Your Box Borders in CSS

by Christopher Heng, thesitewizard.com

If you were to create a rectangular box outline around the content on your web page using Cascading Style Sheets (CSS), the default is that your box borders will have pointed right-angled corners. To get rounded corners for the box, many webmasters in the past have resorted to using images to give the appearance of curved corners. This article shows you how to achieve the same effect using CSS. It also discusses some of the limitations to using CSS for this purpose at this time.

Who is This Article For?

This article is written for someone who knows how to work directly with HTML and CSS code. You don't have to be an expert in either HTML or CSS to understand this article, but you need to know the basics, otherwise you might be lost when I start talking about CSS rules and properties.

If you don't have a website, and are reading this article just to get the feel of things, it's best to start by reading How to Make / Create Your Own Website: The Beginner's A-Z Guide instead. The latter is written in plain English, and is more suitable for the beginner.

Rounded Corners Using CSS 3's Border-Radius

The CSS property for creating rounded corners is known as border-radius. It is part of CSS Level 3, which at the time this article is written, is still in its "Working Draft", meaning that it has not been formally adopted as a standard yet. Although it has not been officially standardised ("standardized" in certain variants of English), the property appears to have already been implemented in the current versions of Opera, Chrome and Safari. Perhaps more importantly (since they have such a huge browser share), Microsoft has also included support for it in Internet Explorer 9 ("IE9") and later.

Let's take a look at an example box using the border-radius property (below).

Rounded Corners Using Purely Standards-Compliant CSS (Demo)

This paragraph is enclosed in a box that uses the CSS3 border-radius property. You should be able to see the effect if you're using the latest version of Firefox, Opera, Chrome, Safari or Internet Explorer (version 9 and later).

The CSS rule creating the above rounded corner effect is as follows:

border-radius: 20px ;

As "radius" suggests, CSS imagines that the curve is part of an ellipse, that is, an oval or a circle. Since I only provided one value above, the browser draws a circular arc with a radius of 20 pixels for each corner of the box. The picture below shows the top right corner of the box, with the radius marked.

Quarter circle with radius of 20 pixels marked out

Other types of curved corners are also possible. If you supply different values for the horizontal and vertical radius, you get the corner of an oval rather than a circle. For example, the rule below creates corners where the horizontal radius (if that's the right word) is 40 pixels and the vertical radius is 20 pixels.

border-radius: 40px / 20px ;

In other words the shape is more like that of an oval, as illustrated in the picture below of the top right corner of the box (not drawn to scale).

Ellipse with different horizontal and vertical values

As I'm sure you've noticed from above, the first value, before the slash, specifies the horizontal radius and the second value, after the slash, the vertical.

If you do not want to create a symmetrical box, but want each corner to have different curvatures, the easiest way to do this is to use the following (self-explanatory) properties:

The values for individual properties listed above are exactly the same as that for border-radius except that they control only one corner of your box. That is, for each of the above properties, you can either specify a single value like "35px" or a pair of values separated by the slash character ("/") like "35px / 90px".

Non-standard Workarounds for Firefox 3.x and Old Versions of Safari

Old versions of Firefox, version 3.6.8 and earlier, do not support the border-radius property. However, version 3.6.x (where x is some number or other) implements a proprietary CSS property called -moz-border-radius that functions the same way as the standard CSS version. As such, if you want your box to be rendered with rounded corners even with Firefox 3.6.x, you can use this property together with the standard CSS property, as in the example below.

border-radius: 20px ;
-moz-border-radius: 20px ;

The first line sets the border radius for all browsers supporting the CSS 3 standard, and the second line sets it for Firefox.

To set a different radius for each individual corner of your box, use:

Note: while Firefox version 3.6.8 supports things like elliptical borders (the oval-shaped corners mentioned earlier) using the same notation (two values separated by the slash character, "/"), earlier versions (I think earlier than 3.5) do not. In addition, try to avoid using percentage as your unit of measurement here, since it is interpreted differently in the early versions of Firefox. Of course if you don't really care about supporting such old versions, then you can simply use the same values for the Firefox-specific properties as you are using for the standard CSS properties, without any restrictions.

Although the current version of Safari supports border-radius, older versions also include their own proprietary equivalents, called -webkit-border-radius. The individual corners can also be customised separately with:

I don't know if the old versions of Safari have support for elliptical borders the way CSS3 does, since I don't have any of the old versions lying around to test. In any case, it's probably not important now, since the current Safari versions already support the CSS 3 border-radius property.

Incidentally, the -webkit-border-radius family of rules affect all WebKit-based browsers, not just old versions of Safari. That is to say, it also affects old versions of Chrome. However, since Chrome auto-updates itself on all installations whether the user wants it or not, I've not bothered to mention the use of this rule for older versions of Chrome, since there probably aren't any in use.

The CSS code below puts the standard CSS 3 rule together with the non-standard extensions from Firefox and Safari.

border: 1px solid black ;
border-radius: 10px ;
-moz-border-radius: 10px ;
-webkit-border-radius: 10px ;

The first line sets a solid black border that is 1 pixel thick. The other lines sets a border radius of 10 pixels with the CSS 3 rule coming first, followed by the proprietary rules for Firefox and Safari. Since the rules above were copied directly from the style sheet used by thesitewizard.com's home page, you can see it in action by looking at the two boxes at the top of that page. The curvature of the corners is not very pronounced in those boxes, as compared to the example at the beginning of this article, since the radius is only 10 pixels.

Update (March 2014): There is a strong chance that there is no need to include these non-standard workarounds anymore. The versions of Firefox and Safari that need them are very old, so I suspect that few, if any, are even using them any more. In other words, if you can't be bothered to add the above lines, just use the standard CSS rules.

What About Internet Explorer 8 and Below?

Internet Explorer 8 and earlier does not have any support for border-radius in any form, whether in the standard CSS 3 version or through the use of a proprietary rule like in Firefox. As such, if you are really determined to have rounded corners for your boxes for all browsers in use, you will need to find another way to do it (eg, using images).

Alternatively, if you're willing to compromise a bit, and your site's visual design is sufficiently flexible to accomodate sharp edges, you can do what I currently do with thesitewizard.com's home page: implement the rules only for those browsers that support it. Visitors using other browsers will just see a regular rectangular box. I know it's not a perfect solution, but unless you're prepared to put in a lot more work using images, it'll have to do.

Conclusion

It is already possible to create rounded corners for your boxes purely using CSS (without images) that will work in many browsers today. If you're not someone who likes to muck around with slicing and splicing images for your rounded corners, the above technique is one way to get the same effect with very little effort.

Copyright © 2010-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Create Rounded Corners for Your Box Borders in CSS





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.