Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill A lot of people shy away from it because it SEEMS a lot more difficult than it really is.
I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.
Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. So let’s start easy!
First open up Photoshop, and create a new document with a size of 200x200px.
For this example you don’t really need to have a background color (ie: you can use a transparent gif), but for the sake of this example I’m going to use a white background fill.
Next, select your rounded rectangle tool and draw the shape out to fill most of the box. My shape radius option is set to just 5px, but you can choose whichever best fits for your design. The concept is the same no matter how rounded your corners are.
I’ve chosen one of my favorite colors for the shape’s fill – #ff008a – a nice bright magenty-pink
Now, hold down CTRL while clicking on your shape layer. Your shape should now be selected:
Now that you have the whole shape selected let’s remove any excess background you might have. From the top menu choose “Image” and then choose “Crop”. This will take your image down to just the shape. You will see a tiny bit of the background peeking from the corners where it rounds.
Make sure your shape is still selected (CTRL + CLICK shape layer). Now, choose the Rectangular Marquee Tool (keyboard: M). Now, while holding down the ALT key* (while holding ALT and using the rectangular marquee tool parts of your selection that are already selected will be deselected) select right after the TOP rounded corners end deselect the bottom half. It may be helpful if you zoom in a bit.
Here is what your selection should look like:
Great, now crop that image the same way we did to the original shape – find “Image” on the top menu, and then select “Crop” from its dropdown.
There you have it. All we need to make our rounded corner box! I’ll explain:
First, CTRL + ALT + SHIFT + S to “Save for Web…”. Save your image as top.gif.
Now, press CTRL + SHIFT + E to flatten your image. You will be left with one layer. Next press CTRL + T to transform.
***TIP*** if your final layer is “locked” double click the lock next to the layer name and when the dialog pops up called “New Layer” press ok, THEN press CTRL + T.
Right click on your image and from the drop down select “Flip Vertical”. This will give you the bottom to your box. CTRL + SHIFT + ALT + S to save, naming it bottom.gif.
Great. Now that we have our images we can start the code.
Our HTML will look like this (I’m using divs for this example, but theoretically this can be applied to most if not all block level elements).
class=
"wrap">
class=
"mybox">
My box text
This is my rounded box, isn't it so cool!
I love my rounded corner box, it's SO pretty!
And it's expands it's height to
fit in as much text as I want to throw in it!
How awesome!
class="endbox">
**NOTE** : The “wrap” class is really for demo purposes. Because I am using floats for this example unless the parent element has a width the bottom of the box will float next to it. You won’t need to wrap each rounded box in this if you have them in a sidebar/part of your page of some sort with a set width close the the width of your box.
If you want to remove the wrap class and have the same effect in an area with no container width switch the “float:left” in “mybox” and “endbox” to “display:block;”. I recommend using floats contained within a set width parent though to prevent compatibility issues!
That’s it for the HTML, now the CSS. You will need to know several things before starting –
1) The WIDTH and HEIGHT of your rounded corner images AFTER cropping. If you are not sure open the file up in Photoshop and right click the title bar of the image and select “Image Size” and you will see the dimensions. You can also open up the folder where you have saved the image and hover over the image and the popup in Windows will show you the width/height.
2) The location of your image.
.wrap {
width:200px;
float:left;
}
.mybox {
float:left;
padding:10px;
/*Your width is 190px minus 20px for your left and right padding totally to 170px*/
width:170px;
/*the url to your top rounded corner image*/
background:#ff008a url(top.gif) no-repeat;
font:12px 'trebuchet ms', arial, verdana, sans-serif;
color:#fff;
}
.endbox {
float:left;
width:190px;
height:6px;
/*url to the bottom rounded corner*/
background:transparent url(bottom.gif) no-repeat;
}
Great, that’s IT! Like I said before the “wrap” class is necessary only if you aren’t putting this within another div that doesn’t have a width set. This works cross browser FF, IE6/IE7, Safari and Opera.
Now For the “harder” method. It’s actually not much harder. You will need three images instead of two – but it’s the same principle.
I’ll quickly explain how to make our image in Photoshop. First, start just like our previous image create a new image at a size of 200x200px. This time though be careful to make your rounded rectangle shape slightly smaller then the previous version – remember you will need to leave enough space around the image for your surrounding shadow. If you find later on that you’ve run out of space for your shadow then right click the title bar and from the drop down select “Canvas Size”. Add space to the height and width as needed to fit in your shadowing.
Ok, next step is to make our box a little prettier – double click the shape layer to bring up the layer styles dialog. First add a border. For this example I placed a border of 2px, color:#035873 and opacity of 39%. Next let’s add a gradient that repeats down the length of the box.
These are the following options for your gradient:
Finally, lets add our shadow. First CTRL + Click the shape layer to select it. Next, create a new layer (CTRL + SHIFT + N). Move this layer BELOW the shape layer. Make sure your selection is still intact. If not CTRL + Click the shape layer to reselect.
Now, make sure your on the new layer you have created. Fill with black. The next step depends on how much shadow you want. But here is what I did: on the top menu click on the “Filter” menu and from the drop down select the “Blur” option, from that slideout choose “Gaussian Blur…” finally on the window that pops up put in a radius of 4.3.
You should now have a rounded box that looks like this:
Now, for cutting out the slices for this box you will have to select outside of the main rounded box area. For this the best option is to use the rectangular marquee tool (keyboard: M).
Select the top part of your box and make sure your selection is large enough that it goes just slightly beyond your shadow. If you cut too close your shadow will cut off abruptly and you will lose the whole effect.
So your first selection should look like this:
See how my selection reaches outside of the shadow? This is very important. Next, go to “Image” on the top menu and then select “Crop”. Save this image.
Next, press CTRL + ALT + Z to take a step back to before you cropped. Make sure your Rectangular Marquee Tool is still selected. Now hold down SHIFT and press the down arrow to move your selection all the way to the bottom. (Let go of SHIFT if the selection goes to far and adjust up/down as needed).
Repeat the steps to crop, save and take a step back (CTRL + ALT + Z).
Grab your “Single Row Marquee Tool” (click the Rectangular Marquee Tool so the slideout pops out and scroll down to the 3rd tool). Just click anywhere in the middle of your box. You see a single 1px high selection for the width of your box.
Now repeat the Crop and Save.
Great! Now you have the three images you will need to complete this effect. Now it’s time for the HTML:
class=
"wrap">
class="top">
class=
"box">
My box text
This is my rounded box, isn't it so cool!
I love my rounded corner box, it's SO pretty!
And it's expands it's height to fit in as much text as I want to throw in it!
How awesome!
class="bottom">
Again, the wrap isn’t needed if you have it placed within another div in a sidebar-like situation.
And the CSS:
.wrap {
width:200px;
float:left;
}
.top, .bottom {
float:left;
width:200px;
height:23px;
/*url to the bottom rounded corner*/
background:transparent url(rounded-shadow-btm.gif) no-repeat;
}
.top {
/*url to the top rounded corner*/
background:transparent url(rounded-shadow-top.gif) no-repeat
}
.box {
float:left;
padding:15px;
/*Your width is 200px minus 20px for your left and right padding totally to 180px*/
width:170px;
/*the url to your text background*/
background:transparent url(rounded-shadow-bg.gif) repeat-y;
font:12px 'trebuchet ms', arial, verdana, sans-serif;
color:#fff;
}
Works in all browsers!
And there you have it. Two simple ways to have rounded corners using images and CSS!
***TIP*** – For my examples I am NOT using a CSS reset method. So your results may vary. If this is the case (and usually it is with IE6 – big surprise!) you will have to adjust the margins and/or paddings. I’m not going to tell you how to solve this problem should you run into it, because solving your own problems is 99% of how you learn CSS and get your experience. But you now have the general principles and should be easily able to integrate this!
And if you can’t, post any questions in the comments or email me and I will try my best to help you out.
I’m a huge, huge fan of the latest 
