The Blog of Josh Stodola

Rounded corners are pretty awesome, and I have no idea why. Is it becuase they are not the easiest things to produce? If it were simple, would they be as popular? Who knows. In a world of squares, rounded corners are like hot chicks. They're attractive, appealing, beautiful, and everyone wants to have them. So I guess today I get to play the role of a rounded corner pimp, and I am not charging a dime. I will demonstrate how to create these lovely layers with rounded corners that all the poor beveled boxes in the world envy. And I am taking the fluid-width approach because wasting screen real estate is a sin. Anybody with a little CSS knowledge, some patience, and a keen eye can make this happen rather easily.

You do not need to purchase an expensive imaging suite to do this. I would highly recommend Paint.NET, which is a wonderful open-source project written in C#. Overall, it's a very impressive program. If you are a Mac user, it sucks to be you you will have to go with GIMP, that is unless you do not have Adobe Photoshop installed already. Obviously Photoshop rules all imaging programs, but I will be demonstrating with Paint.NET because it's free for all. Here is the game plan...

• Draw a filled rounded rectangle of any size on a transparent background.
• Add a shadow type effect to add some distinction to the edges of the shape.
• Precisely crop out the top left, upper right, and middle left areas of the shape.
• Produce the other required sections by rotating the canvas of those three images.
• Develop the markup and corresponding CSS needed to comprise the final result.

Before I go any further, I must mention that I will be using the wonderful PNG image format with alpha transparency. Alpha transparency is wonderful becuase it has the ability to accurately blend with whatever is behind it. This offers quite a bit of flexibility. However, the downside to this is that older browsers such as IE6 do not support this format very well. In IE6 specifically, all PNG images with transparency will be given an ugly gray background. You can see an example of this by viewing my blog in IE6. There is a fix by Angus Turnbull that corrects the problem for IE. I don't use the script on this site becuase I feel that IE6 is ancient; it is time for us to move on, dammit.

Creating the Shape in Paint.NET

Open up Paint.NET and create a new image, it does not have to be huge. Before drawing a shape, Select All (Ctrl + A) and erase the selection by pressing the Delete key. This will give you a transparent background, which is generally represented by gray and white checkerboard. Paint.NET always defaults to a solid white background, and I don't know how to change that.

Now you can draw the shape; Paint.NET has a rounded rectangle tool that makes this pretty simple. You'll want to make a decision on which color to use first, I chose to use a shade of blue. For this blog, I went with White and low opacity (I will get to that in a minute). Select the Rounded Rectangle icon from the box of tools, and set it to draw a filled shape, as illustrated below...

Now you can draw the shape. Size does not really matter at this point because we are going to be stretching the parts of the image as needed.  Here is what my shape looks like...

To add some distinction to the edges of the shape (optional), I will use Paint.NET's Unfocus effect, which can be found in the Effects menu, under the Blur category. Any value from 1-6 should be fine. The unfocus effect will blur the edges in with the background. Since I am using a transparent background, the edges will blur with anything that ends up underneath it, which is exactly what I want. Here is what it looks like unfocused...

Semi-Transparent PNG Images 

I am not going to be doing this in my example, but I want to show you how to make the whole image semi-transparent, just like I use here on my blog. It is really simple to do in Paint.NET, like most of the things illustrated here are. All you need to do is press F4 on the main shape, and that will bring up the Layer Properties window. You can drag the opacity lever to your liking and you will start to see the gray checkerboard come through the entire shape. The lower the opacity, the more transparent the image becomes. Easy as that! The fantastic PNG format takes care of the rest.

It's very important than you are comfortable with the shape you have created before moving on. We will be cropping out parts of the picture in order to get this design in HTML format, and it is practically impossible to make modifications to the final shape after you have cropped everything. You would pretty much have to start over from scratch. Adobe Photoshop has features to help resolve this, but that comes with a price tag. So, make sure you like how it looks before forging ahead. If you need to, just save the whole shape as a PNG and experiment in an empty web page with other background colors.  Do whatever you gotta do to be completely satisfied with it.

Crop it, Save it, Flip it, Save it

Here comes the tricky part. To produce the fluid-width layout, I will be using what is called the sliding doors approach. We have to select the top, the left, and the top-left sections of the shape, making sure that the borders will line up when cascaded.  Having a transparent background does not make it any easier (on the eyes, at least). I always begin with the upper left corner, you want to make sure you select enough of it so that there is a smooth transition between the rounded part and the straight part. I usually zoom in to about 1200% to do this. Take the rectangle select tool and start at the first pixel that clears the "curve" effect on the bottom left side of the upper left corner and drag it upwards and to the right...

As you can see in the image, Paint.NET keeps a history of your steps so if you mess up during the selection, you can easily step backwards (Ctrl + Z) and try over. Make sure you have selected all of the "fading" pixels of the corner. Now you want to go to the Edit menu and choose Cut (or press Ctrl + X). Then choose New from the File menu (or press Ctrl + N). The program will automatically set the dimensions of the new image based upon what you have on the clipboard. Choose OK. Before you paste, make sure you do a Select All (Ctrl + A) and press the Delete key to start off with a transparent background (again). Once you have your transparent background, go ahead and paste the image. Now save it by choosing Save As from the File menu (duh)...

You will want to select PNG as the file type. I always name these files as abbreviations for their location within the shape. So the top-left piece is "tl.png", the left piece is "l.png", the bottom-right piece is "br.png", etc. If a background image is necessary for the main part, I name it "bg.png".

We can easily re-use this top-left image for the bottom-left by flipping it vertically. This will maintain strict consistency between the dimensions and position of both shapes, and will more importantly save us some time. Once you have saved the image, choose Flip Vertical from the Image menu. Do another Save As and name it "bl.png".

And now we have our top and bottom left corners and they are ready to use. Keeping in mind that I am taking the fluid-width approach, the top-right and bottom-right pieces are going to have to be very wide to accomodate all of the modern screen resolutions. I would target the maximum width of the final shape to be at least 1600 pixels, especially considering the increased popularity of widescreen monitors. For this example, I am aiming for 2400 pixels. Since the upper and lower left images are 12 pixels wide, the upper and lower right images will need to be 2388 pixels (2400 minus 12), and both of the images should be 12 pixels in height. So, get back to the original shape in Paint.NET (you can exit or press Ctrl + Q to bring up the Image List). Select as much of the top right section of the shape as possible, using the slice from the previous cut as a guideline...

Drag it slowly across the screen until you reach the other side where the top right corner of the shape is.  Be consistent with your selection; try hard to recall how many pixels of whitespace you selected outside of the shadow (if any) on the top-left corner. Now you want to do another Edit | Cut and then File | New.

Before deleting the white background and before pasting the image on the clipboard, we need to make the image canvas very wide to accomodate for all modern screen resolutions (fluid-width, remember?). To do this, select Canvas Size from the Image menu (or press Ctrl + Shift + R). As previously noted, this image will need to be 2388 pixels wide...

And now, once again, do a Select All and press the Delete key to get a transparent background (it's an easy step to forget, trust me). Go ahead and paste the image and drag it to the right edge. Make sure you are precise in the positioning against the right edge, it needs to be consistent...

Now choose Deselect from the Edit menu (or press Ctrl + D). It is fairly easy to stretch sections of an image in Paint.NET; just select the chunk that can be horizontally repeated without distortion (obviously do not include the corner), and then click the "Move Selected Pixels" tool to make then resizeable "nubs" appear...

Now just grab ahold of the middle nub on the left edge and drag the selection all the way across to the end of the canvas. After you have stretched it, scroll back over to the right edge and make sure the corner still looks alright. If everything looks good, do a Save As and call it "tr.png". Just like before, choose Flip Vertical from the Image menu and do another Save As and call it "br.png".

Phew, the hard part is done. It's pretty much mooth sailing from here on out. Go back to original shape in Paint.NET. All we need now is a chunk of the left edge. I usually include one pixel of the shapes core color with the left image...

You might be thinking "why select so much?" or "why not just select one pixel of height for the left edge?" and there is a reason. Some browsers do not handle the PNG format too well. If you have a ton of them repeating, the browser tends to have noticeably slow response. A 20-30 pixel chunk can make a lot of difference, and the file size will not be that much larger. I chose to select a piece of the left edge 30 pixels in height. Follow the same pattern as before; Edit | Cut (or Ctrl + X) and then File | New. Do a Select All (Ctrl + A) and press Delete to get a transparent background. Paste the image and save it as "l.png". This time select Flip Horizontal from the Image menu and save it as "r.png".

The following is not really necessary for this particular example, but I am going to demonstrate it anyways because if you are using a modified opacity level (like I do on this blog), you will need to use a background image to make up the center part (the body) of the shape. To do this, simply select a chunk in the middle of the original shape and follow the normal procedure for saving it as "bg.png". I used a 50x50 chunk for the background image in my example. And now it's time for the fun part!

The Almighty <div> Tag

In order to layout all of these images and create a markup-based shape, we will need to use a series of <div> tags. CSS will be used to position the tags and set the background images. Here is the general markup structure...

<div class="rounded">
    <div class="top"><div class="right"></div></div>
    <div class="middle"><div class="right">
        <div class="content">
            <!--Content goes here-->
        </div>
    </div></div>
    <div class="bottom"><div class="right"></div></div>
</div>

The first <div> is the wrapper. It is immediately followed by the top section, the middle section, and the bottom section. Each section must immediately contain a child <div class="right">, which will essentially make up the right edge of the shape. This is a perfect structure for the fluid-width layout. Last thing to do is develop the stylesheet, which is really the brains of the whole operation.

Bringing it all Together with CSS

Here are the goals we need to accomplish with CSS for each <div> tag...

Wrapper

The wrapper class will control the positioning, the outer margins, and the width of the entire shape. For fluid width, we want to use a high percentage. We also want to set a max-width value to the maximum possible width of our shape (2400 pixels, remember?), so that things can not possibly get ugly. It also needs to clear from both the left and the right.

Top

This will contain the top left background image and will have a 100% width (the actual width will be inherited from the wrapper).

Top Right

This <div> contains the extra-wide background image. To make this image work the way we want, we need to anchor the background position to the top-right. This <div> will also set the height for the top section, which will be the height of each background image (12 pixels). A left margin is also necessary to accomodate for the width of the top left background image contained in the parent (again, 12 pixels).

Middle

This will contain the left background image, which will need to be repeated vertically (on the y-axis). This will also be 100% width, and it needs to clear from any other elements to the left or right of it.

Middle Right

This contains the right background image (again, repeated on the y-axis), and accounts for a small margin of 5 pixels for width of the background image contained in the parent.

Middle Right Content

This will be the container for the content of the final shape, and will contain the background image ("bg.png") if necessary. It will set the font, color, text alignment, and line height. Padding to the right is needed to accomodate for the middle-right background image. Also, child elements of this <div> such as <p> and the <h1> will need to be styled to suit your needs. Practically anything can go inside of this layer.

Bottom

This will contain the bottom left background image and will have a 100% width. As with all other "sections", it needs to clear from any other elements to the left or right of it.

Bottom Right

This is very similiar to the top-right section, except the background position should be anchored to the bottom right. Everything else is the same.

I think that should be enough explanation to make this understandable. Time to get down to the code. You just gotta love this part...

div.rounded {
    clear:both;
    max-width:2400px;
    margin:5px auto;
    width:95%;
}

div.rounded div.top {
    background:url(../images/tl.png) no-repeat bottom left;
    padding:0px;
    width:100%;
}

div.rounded div.top div.right {
    background:url(../images/tr.png) no-repeat bottom right;
    height:12px;
    margin-left:12px;
}

div.rounded div.middle {
    background:url(../images/l.png) repeat-y left;
    clear:both;
    width:100%;
}

div.rounded div.middle div.right {
    background:url(../images/r.png) repeat-y right;
    margin-left:5px;
}

div.rounded div.middle div.right div.content {
    background:url(../images/bg.png) repeat top left;
    color:#fff;
    font-family:"Trebuchet MS", Calibri, Tahoma, sans-serif;
    font-size:1.0em;
    line-height:1.3em;
    margin-right:5px;
    padding:0px 7px;
    text-align:justify;
}

div.rounded div.middle div.right div.content p {
    margin:0px;
    padding-top:15px;
}

div.rounded div.middle div.right div.content h2 {
    color:#0f2;
    font-size:1.75em;
    font-weight:bold;
    margin:0px;
    padding:7px 0px;
}

div.rounded div.bottom {
    background:url(../images/bl.png) no-repeat top left;
    clear:both;
    padding:0px;
    width:100%;
}

div.rounded div.bottom div.right {
    background:url(../images/br.png) no-repeat top right;
    height:12px;
    margin-left:12px;
}

And that's really all there is to it. Not too shabby, eh? I have setup a demo page for you all to go check out. It has the final result on it and you can change the background color to see how flexible the fade effect is (thanks to PNG). I also have everything available for download in a zip file. Enjoy!

  View the Demo
  Download rounded.zip (7kb)

If you have any confusion about how this works, feel free to ask me a question. If you have any comments or suggestions, I would love to hear them as well! Just use the form at the bottom of this page.

Have fun!