Making Rounded Corners with CSS (Part II)

In part I of "Making Rounded Corners With CSS", I focused exclusively on creating background images for web pages using the GNU Image Manipulation Program (GIMP) to design plain rounded-corner boxes of a solid color. I now move on to creating the web images required--at least for this technique, for making rounded corners with CSS that are "fancier," or bordered. Again, a basic, but solid knowledge of XHTML, CSS, and Adobe Photoshop or the GIMP is assumed and required to benefit from this tutorial. I used the GIMP release 2.6.2 under Fedora 8 (Linux) without installing any plug-ins. If you use the GIMP under a very light flavor of Linux such as Puppy, you might not see all of the options to which I refer. The GIMP is also available for MS Windows users.

Prepare the Background Images for Web Pages

The following step by step instructions for preparing the web images needed to make rounded boxes that are "decorated" with any border design of your choice are one of a number of techniques. Of course you don't have to use the same dimensions and sizes that I used; but, you won't want to deviate too far outside of these "limits." Make adjustments as you see fit for your specific project. I specify sizes in my instructions because we have to start somewhere.

1. Open the GIMP and start a new file 400px wide by 400px high on a transparent background.

2. Using the paint bucket tool, fill the background with the color of the page or "platform" on which the rounded box will sit. Don't skip this step or you'll ruin your rounded corners visual effect.

3. Go to "Select" on the menu and click on the "Rounded rectangle" tool. Make the radius 40 percent and leave the concave box unchecked.

4. Fill that rounded rectangle with the color (foreground) of your choice; this is your border color. You could also fill it with a pattern if you'd like. You can get as fancy as you'd like when making rounded corners with CSS if you know how to properly create the background images for web pages to display them.

5. Now you'll want to turn the selection of the rounded rectangle off by clicking outside of the image. You'll know when it's off when the dashes that form the outline stop moving. Make sure you're on the rectangle select tool when you click.

6. Using the rectangle select tool, draw a box on top of the previously created rounded rectangle. Yes, this is a square box for right now. Although you'll need to stay within the borders of the rounded rectangle already created, it's okay--in fact, it's recommended that you bump the pointed corners of this box you're drawing against the edges of the rounded corners of the box serving as the border (previously created rounded-corner box).

7. You're now going to round this box you've just drawn by going to "Select" on the menu and choosing "Rounded rectangle." Again, go ahead with 40 percent for the radius and keep the concave box unchecked.

8. Now you're ready to fill the second rounded-corners box with the color (foreground) of your choice. Be careful since this is the color on which your text or other images will sit. Visitors to your site shouldn't have trouble reading the text because of poor color combinations.

9. Take selection off again as you did in step five.

10. Using the rectangle select tool, select the top of your image. Let the ruler guide you to select exactly 400px wide and 100px high (down from top). You'll need three background images for web pages containing rounded-corner boxes of this type: a top image (400px by 100px), a bottom image (400px by 100px), and a middle image (400px by 200px) which will be tiled. Actually, you might want to have the imaged to be tiled overlap just a little to avoid "breaks" or "gaps" in the box. I'll explain shortly.

11. Press ctrl + c to copy the top selection.

12. Press ctrl + n to start a new file to which you should assign a size of 400px wide and 100px high, the exact size of your top selection.

13. Press ctrl + v to paste the copy of the top of the image to the new file.

14. Press ctrl + b to anchor the newly pasted image down.

15. Save the image as top.gif.

16. "Grab" the image to be tiled by returning to your original image and selecting the middle portion. To ensure that there are no gaps in the appearance of the final result, I'd suggest overlapping. Remember, your first copy (top.gif) is 100px in height meaning that you went down 100px. To overlap, I'd suggest that you start selecting the middle image at 95 down instead of 100 in order to have some overlap and go down to about 305px in height. Your middle image would be 400px wide by 210px high. Follow steps 11 thru 15 to copy, start a new file, paste, and anchor the middle image down. However, the size of the new file to hold the middle image only has to be 400px wide by 205px high and the name could be tile.gif.

17. To create the final bottom image, simple flip the top image vertically by going to "Image" on the menu, "Transform," and then "Flip vertically." You can use the "save as" feature to call the flipped (bottom) image bottom.gif.

Code Needed for Making Rounded Corners with CSS

Now that you have your background images for web pages that will contain these boxes, you're ready to write your XHTML and CSS code. Please note that html tags (div, paragraph, heading) in my code had to be stripped for security purposes. However, I explain them so you know how to apply the classes and have attempted to put place markers where tags should go.

---Code Begins Here---

html
head titleCSS Fixed-Width Rounded-Corner Box With Border/title
style type="text/css"
.borderedBox {
width: 400px;
background: url(tile.gif) repeat-y;
}

.borderedBox h2 {
background: url(top2.gif) no-repeat left top;
padding-top: 50px;
}
.borderedBox .last {
background: url(bottom2.gif) no-repeat left bottom;
padding-bottom: 50px;
}

.borderedBox h2, .borderedBox p {
padding-left: 50px;
padding-right: 50px;
}

/style
/head
body
div class="borderedBox"
h2CSS Fixed-Width Rounded-Corner Box With Border/h2

p
Almost anything that you can do with expensive Adobe Photoshop, you can also do with the FREE GIMP. Almost anything that you can do with expensive Adobe Photoshop, you can also do with the FREE GIMP.
/p

p class="last" Almost anything that you can do with expensive Adobe Photoshop, you can also do with the FREE GIMP. Almost anything that you can do with expensive Adobe Photoshop, you can also do with the FREE GIMP.
/p
/div
/body
html

---Code Ends Here---

Explanation of Code for Making Rounded Corners with CSS

This technique is a little more involved than the one I show in part I dealing with rounded-corner boxes of a solid color. I created a class called ".borderedBox" on which the tile image is applied; it might be thought of as the "body" of the box. Since only one image can be applied to the actual "body" of the box, top.gif and bottom.gif must be applied to a "top" tag such as "h2" and to a "bottom" tag in the "container" such as the paragraph tag respectively. No background color on .borderedBox is necessary because of the tile. Also, notice the padding added. Padding is essential to make all text appear within the confines of the box without being bumped against its borders. The div tag receives the class name ".borderedBox" and the last paragraph tag receives the class name ".last." You can see the results of this technique in the black and yellow image of a rounded-corners box I've shared here.

Source:

AAS in Web Development - my text book: CSS Mastery Advanced Web Standards Solutions by Andy Budd with Cameron Moll and Simon Collison