Hi peeps,

Ever wanted to know how to add those nitfy, rounded corners to your designs? Today I’m going to share with you a couple of simple techniques to create rounded corners using a mix of CSS, HTML and a few images. Ready?

Method One - Fixed Width

This approach only works with fixed width areas so you need to know the exact dimensions of whatever you’re trying to give rounded corners. For the purpose of this tutorial let’s say that our width is 300px.

This method requires three images:

rounded-top.gif

rounded-bottom.gif

bg.gif

Now, here’s our HTML markup:

1
2
3
4
5

<div class="rounded-box"> <!-- rounded box -->
     <div class="top"></div>
     <p>Hello World!</p>
     <div class="bottom"></div>
</div> <!-- end rounded box -->

… and our CSS markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.rounded-box {
    width: 300px;
    background: url('bg.gif') left top repeat-y;
}
.rounded-box .top {
    height: 6px;
    background: url('rounded-top.gif') left top no-repeat;
}
.rounded-box .bottom {
    height: 6px;
    background: url('rounded-bottom.gif') left top no-repeat;
}
p {
    margin: 0px;
    color:#ffffff;
}

What we have done here is quite simple actually. We have a container div with the class rounded-box. Using CSS we set its background image to be bg.gif. Inside our container we have two more div’s with the classes top and bottom. For each of these we set their background image to be rounded-top.gif and rounded-bottom.gif, respectively.

Here’s the final result:

hola mundo

Method Two - Liquid

The first technique works just fine but only for fixed widths. What if we wanted to work with something whose width changes? This approach involves making our design a liquid one. Read on!

This time we will be needing 5 images:

rounded-top-left.gif

rounded-top-right.gif

rounded-bottom-left.gif

rounded-bottom-right.gif

bg.gif

Again, here’s our HTML Markup:

1
2
3
4
5
6
7
8

<div class="rounded-box"> <!-- rounded box -->
    <img class="left" src="rounded-top-left.gif" alt="" />
    <img class="right" src="rounded-top-right.gif" alt="" />
    <p>Hello World!</p>
    <img class="left" src="rounded-bottom-left.gif" alt="" />
    <img class="right" src="rounded-bottom-right.gif" alt="" />
    <div class="clear"></div>
</div> <!-- end rounded box -->

… and its CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.rounded-box {
    width: 300px; // set whatever width you want here
    background: url('bg.gif') left top repeat-y;
}
.rounded-box .left {
    float: left;
}
.rounded-box .right {
    float: right;
}
p {
    margin: 0px;
    padding: 0px 10px;
    clear: both;
    color:#ffffff;
}
.clear {
    clear: both;
    height: 0px;
    line-height: 0px;
}

In this method we are going to use four different images, one for each corner. By using the CSS float property, we make them float left or right depending on which side they belong. Also, as the previous method we set our container’s background image to be bg.gif. At the end of our HTML code, you’ll notice a new div with the class clear - its purpose is to clear both left and right to keep the background consistent and doesn’t cause any problem.

This is the final result:

Hello World!

Final Words

I gotta say that these two methods aren’t the only solution to this problem. There are plenty of ways to achieve it. However, I’ve found that these two are effective and doesn’t require too much coding. Give them a try and let me know what you think

Cheers!