Rounded Corners with CSS and One Image

Today I want to talk about how to create that rounded corner look you see popping up all over the internet.

Why rounded corners ?

Well like most web design fads it’s a more dynamic and appealing way to server your sites content up to the user.

Are rounded corners necessary?

Absolutely not, but hey back in the beginning of web development neither was a lot of things such as background colors HAHA.

Is this the only way to make rounded corners?

No and I doubt its even the best way its just my technique I like to use you can find hundreds of other rounded corner tutorials out on the net.

(Note: In time this technique will be obsolete due to CSS3 and the ability to create rounded corners with purely CSS. You can use CSS3 techniques today but unfortunately a few well used but not so much liked browsers do not support CSS3 yet and most likely won’t for quite some time to come.)

Let’s start off with our blank document.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Corners Tutorial</title>
</head>

<body>
</body>
</html>

Now let’s create our html structure of our content box and its four corners. I am going to use a combination of a div box and an unordered list because its easier to maintain in an actual html document that may have hundreds of lines of code.

Place the following inside your body tags.

<div class="cell">
    <ul>
        <li class="tl corner"></li>
        <li class="tr corner"></li>

         <li class="bl corner"></li>
         <li class="br corner"></li>
      </ul>
</div>

Now let’s create a few CSS classes for our content cell and its four corners. We use classes because the potential of us using multiple boxes with rounded corners is high. With strict XHTML standards you are only allowed to use CSS id’s for elements that occur once on a page but classes can be used with multiple elements on the same page.

In our documents header tags add the following.

<style type="text/css">
.cell{}

.cell ul{}

.cell li{}
</style>

We now have three classes in our styles. (.cell, .cell ul and .cell li) Let’s break down each one so we can get a good idea of what is going to happen with these classes down the line.

.cell {} is the class for our main div box container that will hold not only our content but also our four corners.

.cell ul {} is using our first class to point to any unordered lists we have inside our content div box.

.cell li {} is like the (.cell ul) in the manor that it too uses (.cell) to point to any unordered lists we have in our content div box but its specifically pointing to all list items within an unordered list that resides in our content div box.

Let’s now start adding properties to our classes. Make your CSS look like the following.

.cell{
position:relative;
padding:21px;
background-color:#f8c771;
float:left;
display:inline;
}

.cell ul{
margin:0px;
padding:0px;
}

.cell li{
list-style:none;
}

In our .cell class you can see that we have created a background-color and a padding of 21px, I use a padding of 25px because in this tutorial we are going to create some fat rounded corners that are 20px in radius so we use 21px to give us extra 5px padding from our boxes edges and corners. We also use the odd number 21 instead of 20 because some versions of IE mess up upon to great of a font size change resulting in a 1px border on some corners.

We have a background-color property here that is set to my desired color. You may change this background color to whatever you like but note that if you do you will have to change our corner image that we will cover here in second to your new background color.

I have also placed a position:relative; property in our .cell class because we are going to be using a position of absolute for our four corners. If I didn’t have the position:relative; in our .cell then when we set our four corners to be absolute they would be positioned absolute to our document and not absolute to our div box container.

Finaly we have a float of left and display of inline. For IE users that dont set a desired width this is important because with our floating our .cell things get messed up in versions of IE5 and IE6. As a good practice always include display of inline when floating an element.

.cell ul has set its properties of margin and padding to 0px in order to make sure our four corners will be fit snug to our content div boxes four corners and have no un-needed spacing that’s automatically created from unordered lists.

Last we have a list-style:none; property in our .cell li. We use don’t want any list styles such as dots appearing next to each <li> we use in our content box so we take them out with this property.

Next we are going to create classes for our four corners. Add the following to your CSS.

.tl{}

.tr{}

.bl{}

.br{}

These classes stand for top left(.tl), top right(.tr), bottom left(.bl) and bottom right(.br). Because we are going to be positioning each of these as relatively absolute to our content div box we need to specify their positions.

Add the following property’s to each of these classes.

.tl
{top:0px; left:0px; background:url(images/corners.jpg) top left no-repeat;}

.tr
{top:0px; right:0px; background:url(images/corners.jpg) top right no-repeat;}

.bl
{bottom:0px; left:0px; background:url(images/corners.jpg) bottom left no-repeat;}

.br
{bottom:0px; right:0px; background:url(images/corners.jpg) bottom right no-repeat;}

Ok here you can see we have a top and either left or right property for the top corners. For the bottom corners we use a bottom and either a left or right property and again all these are doing is positioning our corners inside our content box.

Now you might have noticed we are also using a background property for each of these corners. The background property is calling a image I created in photoshop and we are positioning the image inside of our corners and telling the background not to repeat.

Because this is not a PhotoShop tutorial I will just show you the image we are using so you may get a clear idea as to why I have positioned the image and set a no-repeat in each corner.

Here is the image that makes our rounded corners.

HEY THAT’S NOT A CORNER!

Indeed its not but to save time and memory it’s wise to make a single image that is a circle and is twice, let me repeat that “TWICE” the size of our desired corners.

In this tutorial our corner radius is 20px so we therefore make our circle image 40px wide and 40px tall.

Ok remember how I told you we are going to position our corners to be absolute within our container div box? Well we need to make one more CSS class that will make each of our corners position absolute.

Add the following rule and property’s to your CSS.

.corner
{width:20px; height:20px; position:absolute; z-index:1;}

With this class we are setting each of our corners to have both a width and height of 20px, position to be absolute and have a z-index of 1. Z-index is a way to tell the browser to make our corners priority number one when it comes to a rendering hierarchy. So with z-index:1; our rendering hierarchy will go corners->content->container box.

Let’s take a look at our results.

Hmm looks like a long tube of some sorts.Let’s add some dummy content to it in order to see if our box is stretchy and won’t break if we increase our browsers font size.

Make your HTML look like the following.

<div class="cell">
    <ul>
        <li class="tl corner"></li>
        <li class="tr corner"></li>
        <li>
Nihil eligendi intellegebat et sit, et sit assum aperiam utroque. Augue debitis in sit,
duo an eros saepe timeam. Reque erant efficiendi ad vix, nobis saepe mucius no mel. Cu pro diam
probo convenire, duo ad senserit scripserit philosophia. Admodum commune convenire vix ne, sed
eu tota omnis inani. Odio impetus laoreet usu an, cu tamquam lucilius urbanitas duo, an postea
platonem dissentiet mel.

Qui porro aliquip placerat ei, te eum dicam habemus senserit. Usu an esse saepe efficiantur,
sea at debitis platonem adversarium, in salutatus consequat vix. Altera blandit suscipiantur
ius eu, autem iriure scripserit vix ut, eam ex apeirian postulant. Vis atqui aperiri fuisset ad,
eam te adolescens interesset. Erat iusto propriae pri id, ea sed veri scripta imperdiet.

In quo dicit invidunt intellegam, his vidisse moderatius instructior at, mel dolores consetetur
complectitur eu. Enim utinam voluptatum ad est, no eam iusto integre suscipiantur. Sea cu noster
expetendis suscipiantur, ea mea kasd vidisse patrioque. Tantas feugait suscipit per ad, an quas
soluta latine mei. Iudico discere comprehensam an vix, magna scripserit cu usu, quo eu lucilius
patrioque. Offendit lobortis mea cu, no has essent dolorum molestiae.

His autem verear dolores ex, dolor veniam temporibus eu eos, in amet kasd magna qui.
Mazim equidem adipisci mel an, ea quidam omnium deseruisse est, usu debet facilis abhorreant ex.
Est ea ubique qualisque definitionem, ex ignota commune molestie his, ei est civibus accusam.
An usu dicta praesent partiendo, usu autem persius no, adolescens efficiendi appellantur qui ex.
com cu unum putent ornatus, vel dico nusquam et.
		</li>
        <li class="bl corner"></li>
        <li class="br corner"></li>
    </ul>
</div>

All content needs to go in between our top corners and our bottom corners and be wrapped in its own list item tag (<li> </li>) in order for it to work correctly with Microsoft IE.

Here is our final results.

Awesome couldn’t ask for more!!

I would like to point out just one more thing that I always thank the CSS gods for and that’s the fact that this whole technique wouldn’t be possible if we couldn’t use multiple classes in a single element. Remember our html code I told you to put into your body tags of the document? I would like to point out that all <li> corners are not only using their unique class for top bottom and left right positioning but also our .corner to set all corners dimensions and position:absolute; with one fell swoop to same time and memory again.

That’s it everyone I hope this clears some things up and or inspires people to create some awesome looking designs.

Here is a demo of the whole thing if you want to play with it.

Thanks.

Devin R. Olsen

This Article's Comments.

36
Alpha Master Reseller Says:

Thought I would spend time to read and comment on most of your articles today as the weather is so shocking :(
35
Alpha Reseller Says:

Is this the full article? I think somethings missing…
34
lessThan Says:

Great Read!! I want to find an alternative solution to the whole rounded corners thing. One that wont use images and can have like gradient background and border support. Might you know of any?
33
Cherisa Says:

Awesome tutorial!!
32
samson Says:

very Nice tutorial! I used to slice image to make 4 corners then put them as bg in each corner cell . This is so easy thank
31
Nicholas Says:

enjoyed a lot. super. 5 star(*****).
30
Rajneesh Says:

Tuorial is good, But not working properly in IE6.
29
Devin R. Olsen Says:

@Rajneesh, in my testing with IETester that allows you to test with versions IE5.5, IE6, IE7 and IE8 I find no problems. What might be the problem you experiencing on your end? Also what OS are you using?
28
Graphix Says:

you did not need Images for Rounded Corners� there is a code for Firefox and some other browsers, but they did not Work in InternetExplorer (6.0 for sure) just add the following line to a div id container in your .css file. -moz-border-radius-bottomleft:10px; to choose another Corner just change bottom against top and the side you want. BUT REMEMBER… this code will only work in Firefox 3 and above.
27
ravikumar Says:

it’s a nice and superb technique
26
Devin R. Olsen Says:

@Graphix – Indeed you are right and as I stated in the start of the tutorial once CSS3 is the standard for all commonly used browser this method will be obsolete. But until then we must support all browsers even CSS1 browsers and this technique douse just
25
Tharros Says:

This is a very clever way of doing round corners. Thank you! I have found another way using the :before and :after pseudo classes but that is another story :p
24
vineeth Says:

Thanks a lot
23
Stan Omoregie Says:

This is absolutely awesome technique! I never liked the technique with four slice corners for getting this type of result. I’m going to try this right away… Thanx!
22
shafraz Says:

wow.thanks a lot
21
AndrewNS Says:

Thanks, something i was looking for!
20
webtuto Says:

thanks , it was useful
19
aligner Says:

Thanx a lot, your tutorial just solves the design problem I’ve been trying to figure out for a long time. Useful, not complicated with countless
tags. I’m gonna apply this hint on my site right away. Regards!
18
thorne Says:

How can I add another list of items inside this box? great tutorial
17
Devin R. Olsen Says:

Hi thorne, yes indeed you can. Simply apply this to our styles to reset an lists that reside in our .cell.

.cell li ul {margin:10px; padding:10px;}
.cell li li { display:list-item; list-style:disc;}
16
nathan Says:

awesome technique, totally elegant compared to sliding doors and all that. great do…entation too, feels like a weight’s been lifted, nice insight!
15
Devin R. Olsen Says:

Something else I forgot to add is that with this method, you are not restricted to a width or height by your images like quite a few other methods out there on the net.
14
Action Says:

Not working on IE 6. the OS im using is windows 2000. does the os really matters? :(
13
Devin R. Olsen Says:

No the OS shouldn’t matter as far as I know, can you please describe the error or send me your email so I may take a look at your code? This is the second time someone has told me that it wont work in IE6, but my tests have show it has so I would like to narrow the issue down. Unfortunately the last person who said it wouldn’t work in IE never replayed back so it got me no where.
12
Action Says:

I sent my email add already. thank you so much for your help…
11
Lisa Says:

Very cool! Worked perfectly. I appreciate your time and effort in putting together this tutorial. Very easy to follow along. Thank you!
10
douglas Says:

which one of the following entries would position a cell s contents either text or imagery in the top right corner of the cell a.alig=right valign=center b.align=right valign=top c.valign=top align=justify d.valgn=right align=top
9
Devin R. Olsen Says:

douglas, I have no idea what you are trying to do, but to be honest there is no \”=\” syntax in CSS. Therefor I would have to assume that you are trying to work with tables because of the use of valign. valign is only supported in tables not dynamic divider blocks such as \”div\”.
With little bit more of a hint on what you are trying to accomplish here I might be able to help you further.
8
rudy Says:

cool!!! wonderful
7
arne Says:

thanks dude, works great
6
Michael Says:

I used your method on my website with several divs, and it works perfectly fine! Thanks a lot!
5
Michael Says:

Hey lad! I noticed that the problem with the 1px in IE6 5.5 appears to be a generl problem: Your demo site in IE6: http://img.xrmb2.net/images/299372.jpeg Another demo (my page): http://img.xrmb2.net/images/844556.jpeg It’s just a small glitch, but it would be great if this problem could be solved� Greetings!
4
Kirk Says:

Michael is spot on, a small bottom and right border is shown in IE6, this should show up in IETester also when viewing your demo page.
3
thefirstpic.com Says:

I like this method. It’s light and easy to remember. The only problem that I found is the fact that if the background of the page is any color other that the background color of the corner image you’ll see the whole square image. Other than that I really like this simple but very useful method. I shall use this in the future. Thanks
2
Billyboy Says:

Hi, great tutorial, very helpful. I want to make my main preset CSS \”body\” have rounded corners, not a bax inside the already formed \”body\” area. I know I am probably being very dense, but how would I go about it?
1
Yatish Says:

This works ossom!!! my only question is,can we add the shadow with the same technic?