How do I create rounded corners using CSS, JavaScript, Images and HTML?

This is a question I get asked by many aspiring web developers and designers. Everyone wants to use rounded corners these days. Which is great… right? Well, actually the answer is yes and no. While rounded corners are great, making them is not always justifiable.

In this tutorial I will show you how to enhance your website with rounded corners using the best practices in the industry. There are five common ways to make rounded corners. There are other variations each with pros and cons of their own, but they all lean on these five

Download all examples to get started!

Method one: CSS3 = future

Web design and development is about to take a huge leap with the arrival of Windows 7, Safari 4, Firefox 3.6 and Google Chrome Frame. New and exciting web standards like CSS3 and HTML5 are beginning to creep into the browser market. This is due in large part to the web design community, web standards activists, and trends like graceful degradation and progressive enhancement becoming widely adopted.

With the increasing adoption of these new standards we can expect the browser makers to implement new features like “border-radius”, aka rounded corners, very soon. This is an excellent time to start using new and exciting standards as new features are adopted.

To create rounded corners with CSS3 all you need to do is add one line of code to your existing site.

div {
border-radius: 10px;
}

Unfortunately there is some fallback. The property is not “supported” by browsers yet, but we can expect it to show up in IE9. As a huge supporter of progressive enhancement I believe it’s time to start moving away from the next method, CSS + Browser. It’s up to us to continue the web standards movement! We cannot become content with the way things are. We must continue to be enthusiastic about the future, not dwelling on the past, while keeping tune to the present.

While the idealist perspective says use CSS3 the realist shouts for attention. If you want rounded corners, right now, the next technique is for you.

Method two: CSS + Browser = present

Vender specific CSS properties are actually included in the CSS specification. Mozzila and Webkit have both implemented their own versions of border-radius and can be used today.

View the Mozilla Specification
View the Safari Specification

Much like the CSS3 version the browser versions work like this.

div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }

View Example

If your users are primarily using Firefox and Safari this might not be such a bad idea. If you need rounded corners in IE8, IE7, or IE6 you will need to use a different technique.

Method three: CSS + Images = present

Though supported for some time now many aspiring web designers don’t know about background-image positioning. We can use image positioning to achieve the illusion of rounded corners in IE, Firefox, and Safari. Unfortunately this is where things go horribly wrong, all the rules go out the window, and bad coding is justified in the name of design.

Using images is not wrong but if we start thinking about design before considering our code we can get into a mess. (Often we forget about producing semantic code because we are caught up in producing an aesthetic.)

For this tutorial we will be creating a fixed width box with rounded corners. Let’s look at our code. Here we have well written markup. The content is defined properly and we can start to apply our CSS.

<div class="section">
<h2><a href="#">Back to the Article</a></h2>
<p>If you want to go back to the article</p>
</div>

* {
margin: 0;
padding: 0; }

.section {
padding: 0 0 10px;
width: 250px; }

.section h2 {
padding: 10px;
width: 230px; }

p {
padding: 10px;
width: 230px; }

View Example

First we need to create some images with rounded corners; we will use a 10px border radius, and a border to add some depth to our design. These images will need to have a width equivalent to the width of the content we want to display; in this case we need to make it 250px wide.

I will use photoshop to create my images (A half-decent tutorial can be found here). If you don’t have an image editor you might want to try out Gimp.

Once our images are ready we can start coding our CSS. The only thing we need to know at this point is where to position the images with CSS. To do this we need to understand the box model and how we can use it to get the effect we are going for.

This is what our box would look like if we took an x-ray of it. You can see what is going on yourself if you use the favlet x-ray.

View Example

The colored sections represent the 10px padding for the h2, p, and div tags. As rule of thumb you will want to use padding equivalent to your border radius. This will keep the contents of our box from getting to close to the edge of our design. If this doesn’t make sense to you it will soon.

When you add a background image to an element, like div or h2, the default poison of the image is always the top left corner. Because padding is considered to be part of the box’s interior, the padding pushes the content away from the corners. This keeps the text from overlapping the images corners. Finally, we will need to add a border and background to the p tag that match our images. This will keep our design from breaking if we add more content.

.section h2 {
background: transparent url(img/corner-top.gif) no-repeat;
padding: 10px;
width: 230px; }

a {
color: #066; }

p {
padding: 10px;
width: 228px;
background-color: #f2eac5;
border-left: solid 1px #704420;
border-right: solid 1px #704420; }

Note that when we add our border we had to remove the equivalent from the width; which is now 228px. Now all we need to do is add background positioning to the div so that our second image is located at the bottom left corner instead of the default position.

.section {
background: transparent url(img/corner-bottom.gif) no-repeat 0 100%;
padding: 0 0 10px;
width: 250px; }

View Example

Using images and CSS to create the illusion of rounded corners is the most commonly used technique as of the date of this post.

While I support those who want to use images to enhance their design the same cannot be said for my view on JavaScript.

Method four: CSS + JavaScript = past

If you plan to use JavaScript to create rounded corners I recommend reading Jeremy Keith’s book DOM Scripting first. In his book he talks about graceful degradation and the separation of structure, design and behavior. I do not recommend using JavaScript to create design effect that can be achieved with CSS alone. However, this is a technique that can be used in certain situation.

If you are interested in how this can be done sitepoint.com has an excellent article on it.

Method five: CSS + HTML = past

Last you can use HTML and CSS to create the Illusion of rounded corners. The problem with this approach is that is founded upon bad practice and can get you into trouble down the road. The idea behind this technique is tag stacking.

I’m not going to go in-depth with this technique, as it should be avoided at all costs… however! It can be done.

<div style="width: 300px">
<b class="b1"></b><b></b><b class="b3"></b><b></b>
<div>
<div style="height: auto; padding: 5px;">
Lorem ipsum dolor sit amet, consectetur.
</div>
</div>
<b class="b4"></b><b></b><b class="b2"></b><b></b>
</div>

.b1, .b2, .b3, .b4 {
font-size:1px;
overflow:hidden;
display:block; }

.b1 {
height:1px;
background:#c8b56f;
margin:0 5px; }

.b2 {
height:1px;
background:#f6f4e9;
border-right:2px solid #c8b56f;
border-left:2px solid #c8b56f;
margin:0 3px; }

.b3 {
height:1px;
background:#f6f4e9;
border-right:1px solid #c8b56f;
border-left:1px solid #c8b56f;
margin:0 2px; }

.b4 {
height:2px;
background:#f6f4e9;
border-right:1px solid #c8b56f;
border-left:1px solid #c8b56f;
margin:0 1px; }

.contentb {
background: #f6f4e9;
border-right:1px solid #c8b56f;
border-left:1px solid #c8b56f; }

.contentb div {
margin-left: 5px; }

View Example

Sadly I don’t plan to break down this code for you. It’s simply not worth the time to explain, or use, if you can avoid it.

What’s the Point?

I guess the point I’m trying to make here is that there are loads of options when it comes to rounded corners. Some are better than others. If you’re an idealist or a realist it is still good to know the options. Not so we can use them all, but so we can make better choices.

Congratulations for making through this post!