Archive: November, 2008

4

CSS – Rounded Corners

Posted by Andrew, 7 months and 1 week ago.

Introduction

I have been asked countless times how I make my rounded corners when working with HTML and CSS. My method is actually very easy to work with and can be used everywhere. This method is extremely useful when you have content that is always different sizes. This is because this method puts each corner in elements that can expand with your content. Here is what you need to utilize this method:

  • Image editing utility such as Photoshop, GIMP, etc.
  • Text Editor to edit your HTML and CSS.

*Note: Updated on April 7, 2009. IE6 had an issue with the previous method described in the tutorial. It has been updated so IE6 will now render correctly.

How to Make Rounded Corners

Step 1
Open your image editing software, for this example I’ll be using Photoshop. Once you have your editor open create a canvas that is 5 pixel by 20 pixels. Why this size you ask? Well this is for corners that have a 5 pixel radius. You can use any size radius you want, such as a 10 pixel radius corner would have a canvas size of 10 pixels by 40 pixels. This is because the image is divided into four sections. The top section is the top-left corner, then the top-right corner, then the bottom-left corner, and finally the bottom-right corner.

In your canvas, create an image like the following. The easiest way is to take a circle that is 10 pixels by 10 pixels, fill it with the color of your choice, and then cut 1/4 of the circle off. Copy this piece three times so you have four separate parts. Next you will want to rotate each piece until it looks like the following:

CSS - Rounded Corners: Step 1

Once you’re done, save this image as corners.gif for later use.

Step 2
Now you should have a slight understanding of how the image for this tutorial is supposed to be laid out. It is essential that you lay the image out in the order described in step 1 for this tutorial to properly work.

Now how do we take this image and make a nice little box out of it? It’s actually very simple, we are going to use a method known as Image Sliding, which you may be familiar with if you use CSS to make buttons that have hover and/or active states.

Remember that everything on an image is based on an X and Y axis, and point 0,0 is the top left part of your image. To move an image left 50 pixels and down 20 pixels you would do the following:

1

background-position: -50px -20px;

*Note: An easy way to remember this is to know that when you need to move an object left or down you use negative pixel values, and to move an object up or right you use positive pixel values.

Step 3
Now how do you move this image around to display rounded corners on our content box? It’s very easy, but first I need to show you the HTML of our box. Without the HTML you CSS is useless.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>CSS - Rounded Corners (By I Am Web Dude)</title>
   <link rel="stylesheet" type="text/css" media="screen, tv, projection" href="roundcorners.css" />
</head>
<body>
<!-- Our Content Box --->
<div class="box">
   <!-- Top Corners -->
   <div class="t"><div></div></div>
 
   <!-- Your box's content goes here. -->
   <div class="body">Some random text for this to work.</div>
 
   <!-- Bottom Corners -->
   <div class="b"><div></div></div>
</div>
</body>
</html>

See, doesn’t that look simple? You have yourself clean looking source code, while having a cross-browser rounded corner box.

Step 4
Now lets get into the CSS that makes this baby work. Create a file called roundcorners.css and save it in the same directory as your HTML file. Inside of this CSS file you will want to use the following code:

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

.box {
   background: #000;
   color: #fff
}
.box .body {
   padding: 0 5px
}
.box .t, .box .t div,
.box .b, .box .b div {
   background: url('corners.gif') no-repeat;
   display: block;
   height: 5px;
   font-size: 5px
}
.box .t div { background-position: 100% -5px }
.box .b { background-position: 0 -10px }
.box .b div { background-position: 100% -15px }

Now that may look confusing if you have no idea what the CSS background-position attribute does, but it’s quite simple. Let me explain it for you.

The first part of the CSS is defining the style elements for our box. In this example our box will have a black background, and this background needs to be the same color as the color you made your corners.

The next part defines our <div> tag styles. Each tag that has a class of t or b inside of the box class, and then any <div> inside of those two classes will have a background image that is the corners.gif. Also, these elements will always be 5 pixels tall, which is defined by the display: block; height: 5px.

Now this is where the magic happens. We need to slide our background image around to display the corners correctly. The first element, the top left corner, will also be at position 0,0 so we don’t need to define any CSS for it.

The next element, the top right corner, needs to be told to position itself to the far right of our box. To accomplish this we add .box .t div { background-position: 100% -5px } to the CSS. The 100% tells the CSS to push the image all the way to the right, and the -5px tells the CSS to start reading the image at 0,-5px.

Next we need to define the bottom left corner, so we add .box .b { background-position: 0 -10px }. Here we need to keep the image to the far left, so we leave the X value set to 0. We need the CSS to read the image from 0,-10 so the Y value is set to -10px.

Finally we need to set the bottom right corner, so we add .box .b div { background-position: 100% -15px }. This is just like the top right corner except we need the CSS to read the image from 0,-15 so the Y value is set to -15px.

Closing

There you have it, CSS rounded corners using one image. If you want to you can get tricky and save a bunch of corners to one CSS file and use the CSS sliding method to define corner positions for elements all over your website. This would be beneficial to load times as the end-user would only be required to download one image and not twenty different images.

To view an example of this tutorial in action please click here.

, CSS