Sep 9, 2009

Rounded Corners with CSS and One Image

Posted by Devin R. Olsen on in CSS Tutorials | 48 comments

Please note that this method & article is extremely old. It has been seriously deprecated in huge thanks to the CSS3 border-radius:XXpx; abilities.
Please do not use this method, but instead learn about CSS3 border-radius please.

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 site’s 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, it’s 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.)

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’m going to use a combination of a div box and an un-ordered list because its easier to maintain in an actual html document..

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 having multiple boxes with rounded corners is high.

We will start with the following CSS selectors:

.cell{ }

.cell ul{ }

.cell li{ }

We now have three classes in our styles (.cell, .cell ul and .cell li). Let’s break down each rule so we can get a good idea of whats 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 then point to any un-ordered lists we have nested inside “.cell“.

.cell li {} is like the “.cell ul” in the manor that it too uses “.cell” to point to any un-ordered lists we have nested. However, “.cell li” is specifically pointing to all list items within an un-ordered list that resides in our “.cell” div box.

Let’s now start adding styles to our classes by making your CSS look like the following:

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

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

.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 21px 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.

I have also placed a position:relative; property in our “.cell” class cause we are going to be using a position of absolute for our four corners.

Finlay we have a float:left; and display: inline;. (For IE users that don’t set a desired width this is important because with our floating our “.cell” 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 it’s margin / padding set to 0px in order to remove any default browser behavior of spacing. The “.cell li” has list-style:none;, and it also remove any default browser behavior (list item bullet points).

Next we are going to create classes for our four corners by adding the following to our 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 “.cell” div box, we need to specify their positions.

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

.tl {
It can take hold of anyone with a knack viagra canada overnight  for photography. This is a famous Chinese plant that is said to be the best for treating erectile dysfunction with this medicine, one needs to be careful of is that it is viagra spain Facts about order levitra online not taken by patients who are on heart related medication. purchase generic cialis twomeyautoworks.com Renowned researchers of human sexual responses have stated with the ability for making love well into old age essentially which depends on not stopping. Severe gout attacks can cause severe pain and generic levitra online http://twomeyautoworks.com/?page_id=153 intense burning sensation leaving the affected parts inflamed, raw and hot which couldn't even bear the slightest of touch.     background:url(images/corners.jpg) top left no-repeat; 
    left:0px;
    top:0px;
}

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

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

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

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 an image I created in Photoshop that we are positioning to the inside of our four corners.

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.

Here is the image that makes our rounded corners.

HEY THAT’S NOT A CORNER!

Indeed, it’s 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, 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? 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 {
    height:20px; 
    position:absolute;
    width:20px; 
    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 saepe ">timeam. Reque erant efficiendi ad vix, nobis saepe mucius no mel. Cu pro diam
probo ne ">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 (Click image to see demo).