Making Rounded Corners with CSS (Part I)

During my web development studies in college, I was trained exclusively to use Adobe Photoshop for tasks such as preparing background images for web pages. However, instead of purchasing the expensive Photoshop software, I relied on the free GNU Image Manipulation Program (GIMP) to do my web images homework and had absolutely no compatibility issues. Making rounded corners with CSS requires a basic, but strong knowledge of the CSS language, (X)HTML, and proficiency with either Photoshop or the GIMP. If you don't have those skills, you won't benefit from this tutorial. If you can work with Photoshop, you can work with the GIMP and vice versa; my focus will be on using the GIMP, not Photoshop, to create background images for web pages needed for making rounded corners with CSS.

Prepare Your Web Images Before You Code

Let's say you want a fixed-width rounded-corners box that is flexible vertically or that "grows" or "shrinks" according to the amount of text there is to be contained in the box. This is a simple box consisting of a single color; I'll advance to a more fancy style in part II. I accomplished making rounded corners with CSS and the creation of the web images using version 2.6.2 of the GIMP under Fedora 8 (Linux). The techniques I show didn't require any plug-ins. If you're working on a very light Linux distribution such as Puppy, you might not see all of the options with which I'll be working. Remember, MS Windows users can also use the GIMP which is available free of charge by download.

I'll explain each step that I took so that you get a real understanding of what takes place instead of just copying and pasting code without knowing what does what. Keep in mind that your web images used for making rounded corners with CSS don't have to be the same size or color as mine; I would suggest, however, that you stay close to the sizes I chose while you practice. You can experiment from there to suit your own tastes and work within any confines associated with your site. You'll need to pay close attention to every detail or you won't get correct results. You can start practicing by following the steps below:

1. Open a new file in the GIMP at 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-corner box will sit. This is important; if you skip this step, you won't get the rounded-corner effect--at least not with this technique.

3. Choose the "Select" menu option and click on "Rounded rectangle." Make the radius 40 percent and leave "concave" unchecked.

4. Using the paint bucket tool, fill the rounded rectangle (foreground) with the color of your choice. I worked with a yellow rounded rectangle on a white background as you can see in the image I've included.

5. Using the rectangle select tool, select the top half of the image. Pay attention to the ruler which will guide you into making equal "copies." We're working with an image 400px in width and 400px in height; so, your top selection should be 400px wide and 200px high; this is half of the image.

6. Press ctrl + c to copy the selection. Of course you could cut instead of copying; but, I prefer to copy.

7. Press ctrl + n to start a new file with a transparent background and with the dimensions: 400px wide and 200px high; press enter. Remember, this is the size of you top image.

8. Press ctrl + v to paste the copied selection into the new file.

9. Press ctrl + b to anchor the image down.

10. Save the image with the name "top.gif."

11. You now have the top image; but, you still need the bottom image. Simply flip the top image to turn it into a bottom image by going to "Image" on the menu, choose "Transform" and then choose the "Flip vertically" option. This time you'll need to save AS in order to preserve top.gif and create bottom.gif at the same time.

You now have your background images for web pages on which you'll be making rounded corners with CSS. Next, you still need to write XHTML and CSS code to achieve results. I've included my code below which you may use as a guide. Please note that the HTML tags, for security purposes, had to be stripped from this article; so they don't show. However, I explain them so you can know how to use them in your code.

---Beginning of Code---

CSS Fixed-Width Rounded-Corner Boxes

.box {
width: 395px;
background: #ffff87 url(bottom.gif) no-repeat left bottom;
}

.box h2 {
background: url(top.gif) no-repeat left top;
padding: 10px 0 10px 40px;
}

.box p {
padding: 0 10px 25 20px;
}
(opening div tag)
(opening heading 2 tag)CSS Fixed-Width Rounded-Corner Boxes(closing heading tag)

(Opening paragraph tag here) 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. 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. 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. 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. (Closing paragraph tag here)

--End of Code---

Explanation of Code for Making Rounded Corners With CSS

You can see that I created a class called ".box" which is applied to the div tag to contain the box and its content. The width of the div (395px) is slightly less than the width of the images to prevent "seepage" of the background color (#ffff87) creating "fatter" sides on the box. The job of the background color is to fill the box; so, it must be the exact same color as the rounded box. You should know how to capture the hex number for the color from within the GIMP. The top image (top.gif) is applied to the tag to form the top rounded corners of the box. I applied it to the top left; you can apply it to the top right if you want, you'll get the same results. The bottom rounded corners (bottom.gif) is applied to the bottom of the box (.box). Notice that I had to add padding so that all text would be within the box, but not pushed right up to the edges of it. I'm using the shorthand property for padding here; remember, it's top, right, bottom, left. You can see the result in the image I've included.

What if you don't want a heading in a rounded box? Could you just then apply top.gif to the top of the box? Yes, you could; but, how would you apply bottom.gif? You would need some type of ending tag to which you could apply bottom.gif, a final paragraph tag, for example. Why can't you just apply top.gif to the top of the box and bottom.gif to the bottom? Because CSS wouldn't allow a statement like:

.box { width: 395px;
background: #ffff97 url(top.gif) no-repeat right top;
background: url(bottom.gif) no-repeat right bottom;
}

Below is my code for making rounded corners with CSS when no heading is involved:

---Code Begins Here---

CSS Fixed-Width Rounded-Corner Boxes: No Head Tag

/******************
No header, so bottom image applied to last

since can't apply top and bottom images (two different images) to a single box (.box). You can apply different images to different "parts" contained within the box, but not to the box itself.
************************/

.box{
width: 395px;
background: #ffff87 url(top.gif) no-repeat right top;

}

.box p {
padding: 30px 10px 25 20px;
}

.box .last {

background: url(bottom.gif) no-repeat right bottom;

}
(opening div tag)
(My opening paragraph tag was here where)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. 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. Almost anything that you can do with expensive Adobe Photoshop, you can also do with the FREE GIMP. (Closing paragraph tag)

(opening paragraph tag on which ".last" was applied) 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. Almost anything that you can do with expensive Adobe Photoshop, you can also do with the FREE GIMP. (Closing paragraph tag)

Source:

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