Rounded corners with CSS (2 methods) - XHTML & CSS
Written by Python - Wednesday 14th of May 2008
Perfect
So you're fed up with solid edges huh? Those pointy corners getting the best of you? This tutorial will teach you exactly how you can use a mix of XHTML, CSS and a few images to add rounded images to your designs. Unlike many other tutorials out there this tutorial will show you just a single method whereas this looks at two and then does a comparison to determine which is the best for you.
Table of contents
1. A brief introduction
Before we get stuck into this tutorial let's get a few things out of the way. Firstly, why do we even need to use a mix of CSS and images to create rounded corners when CSS could do it for us? Well if you think that - you're wrong. Sure, the very latest version of CSS may support rounded corners but unfortunately none of the major browsers are right up to date with it. This means that despite your best efforts of implementing them your users still won't see the desired effect.
And secondly, why would we want rounded corners? Rounded corners don't work in every design/layout can can oftem in the wrong places make a design look worse. But used correctly they can give your design a smoother, flowing style to it as they get rid of the rough pointy corners that we've become used to seeing. Rounded corners can be used on a number of different parts of a web site including the overall site's container, headers and/or footers, individual content boxes and more. How and where you use them is up to you!
Take a look at the following examples of where rounded corners have been used.
2. Method #1 [fixed width]
This method for rounded corners using CSS and images only really works with fixed width areas. This means that you must know the exact width of whatever it is you are trying to give rounded corners. For the purpose of this tutorial my width is 300px.
For this we will require three seperate images. They are as follows.
rounded_top.gif
rounded_bot.gif
rounded_bg.gif
Here is our XHTML markup.
<div class="box">
<div class="heading"></div>
<p>
This is my content!
</p>
<div class="footer"></div>
</div>
And then our CSS.
.box
{
width: 300px;
background: url('rounded_bg.gif');
}
.box .heading
{
background: url('rounded_top.gif');
background-repeat: no-repeat;
height: 10px;
}
.box .footer
{
background: url('rounded_bot.gif');
background-repeat: no-repeat;
height: 10px;
}
.box p
{
margin: 0;
padding: 0;
margin-left: 10px;
margin-right: 10px;
}
So what have we done here? Well it's actually quite simple. We have our main container with the class "box". Using CSS we have set its background image to be rounded_bg.gif. Inside that div we then have two other div's with the classes "heading" and "footer". For each of these we have set their background to be either rounded_top.gif or rounded_bit.gif. It produces the following:
You can see this method in action here.
3. Method #2 [liquid]
Method #1 above works fine but only for fixed widths. So what if we wanted to do it for something more liquid - something whose width changes? Read on and I shall tell you.
For this we will require four seperate images. They are as follows.
rounded_t_l.gif
rounded_t_r.gif
rounded_b_l.gif
rounded_b_r.gif
Here is our XHTML markup.
<div class="box">
<img src="rounded_t_l.gif" class="left" alt=""/>
<img src="rounded_t_r.gif" class="right" alt=""/>
<p>
This is my content!
</p>
<img src="rounded_b_l.gif" class="left" alt=""/>
<img src="rounded_b_r.gif" class="right" alt=""/>
<div class="clear"></div>
</div>
And then our CSS.
.box
{
width: 300px;
background: #ff0000;
}
.box .left
{
float: left;
}
.box .right
{
float: right;
}
.box p
{
margin: 0;
padding-left: 10px;
padding-right: 10px;
clear: both;
}
div.clear
{
clear: both;
height: 0px;
line-height: 0px;
}
In this method we are using four different images, one for each corner. Then by using the CSS float property I have floated them either to the left or right depending on which side they belong. At the end of the XHTML markup you will notice an additional div - this simply clear both the left and right so that the background stays consistent and doesn't cause any problems. It produces the following (and will work when the boxes size changes):
You can see this method in action here.
4. Which is best?
Now that you know (or at least, should know) how to create rounded corners using the two above methods it's now time to take a look at them critically and decice which method is the best.
Advantages of method #1
Consists of just three images
Very easy to use shadows and other effects
Doesn't require much code
Disadvantages of method #1
Only works on fixed widths
Advantages of method #2
Works on both liquid and fixed widths
Much more semantically correct
Disadvantages of method #2
Very difficult to use shadows and other effects
Based on the above it is quite tough to choose which is the better option. Personally I would go for method #1 as it makes it much easier to use effects to improve the look of your design. If however your design is liquid and used variable widths then you will be limited to picking the second method here.
These are by no means the only solutions to this problem - there are plenty of other ways of doing it. The aim of this tutorial is to give you a good understanding and a little knowledge on the difficulties of rounded corners as well as a solution to these issues.
You must be a registered user to add your comments.
14-5-2008 Just a note...
Three of my sites all use method #1:
http://www.pythondesigns.co.uk
http://www.codingtuts.com
http://www.tutorialcart.com
Check them out to see real, live, working examples of the technique.