Create rounded corners and implement them using CSS

Rounded corners are well established design technique in the modern web design. Their implementation can sometimes be messy, especially if you are using some scripts or generators.

Alternatively, you can pass a few CSS parameters in order to make a div or any html elements with rounded corners, but it won’t work well in all browsers (Internet explorer… duh duh).

Although in this tutorial i will be explaining how to actually design and code them with xhtml and css to be browser compatible, you can use this css parameters to make rounded corners in Firefox, Safari, Chrome, but not in Opera and Internet Explorer.

For example, if you use this:

#roundedCornerDiv {
-moz-border-radius:20px;
-webkit-border-radius: 20px;
background:#343434;
width:300px;
height:40px;
line-height:40px;
text-align:center;
color:#fff;
}

You will get the following result:

You can ‘tweak’ the parameters like this:

#roundedCornerDiv {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;

-webkit-border-radius-topleft:20px;
-webkit-border-radius-topright:20px;
-webkit-border-radius-bottomleft:0px;
-webkit-border-radius-bottomright:0px;
}

It is self explanatory - you are making the top corners to be rounded, while the ones on the bottom - not.

You can one line them too… just like margins and paddings

#roundedCornerDiv {
-moz-border-radius:20px 10px 20px 10px;
-webkit-border-radius:20px 10px 20px 10px;
}

With these there will be 20px radius on the bottom and top and 10px radius on the sides.

Designing and cutting in Photoshop, coding with xhtml and CSS

#1 Designing

Open a blank new document in photoshop. From the tools panel, choose the rounded rectangle tool.

On the top panel, select your border radius. It would be nice to remember what radius you have assigned later for the implementation.

Draw up a rectangle. Something like this: (i used 15 radius)

You may have a path additionally if you are using a shape (Click on paths next to the layers panel and on the white space to turn off the highlighted path so the path will be removed)

#2 Slicing

Using the marque tool, make precise guides in order to make the rectangle ready for slicing. If you are unsure, refer to the following image.

Important: If the background behind the rounded corner is an image, gradient or anything but solid color, turn of the background layer and any other layers you may have behind the rounded rectangle. Save the image as .PNG in order to preserve the transparency for the background in our html file.

Now make a selection around the guides for the top and bottom corners and slice the images. Your final result should be something like this:

The top of the rectangle slice:

And the bottom of the rectangle slice:

For the middle section of the rectangle, using the marque tool, make a selection that gets the total width of the rectangle, with 1 or 2 pixels height. (Do this only if your background is solid color like in this tutorial)

This is what should you have:

Yes, a line.

Now let’s get the things done with the html and css part.

#3 The XHTML

Open up your Dreamweaver or any application that you use to write html (it can be notepad too).

Write down the following lines

<div id="roundedTop"></div>
<div id="roundedCopy">
     <div id="roundedPadding">
          <h2>This is a box which has rounded corners</h2>
     </div>
</div>
<div id="roundedBottom"></div>

We are creating 4 div elements in order to accomplish our goal. The first div (roundedTop) should use the top part of our rectangular’s slice, the second one (roundedCopy) is going to use the “line” as a background and the third (RoundedBottom) is going to use the bottom part of the rectangular. Oh, the fourth div, which is located inside the roundedCopy, we will assign padding, so the text inside won’t look cluttered.

#4 The CSS

html * {
margin:0;
padding:0;
}

#roundedTop {
width:300px;
height:15px;
background:url(path-to-the-top-image.png) no-repeat;
}
#roundedBottom{
width:300px;
height:15px;
background:url(path-to-the-bottom-image.png) no-repeat;
}
#roundedCopy {
width:300px;
background:url(path-to-the-line.png) repeat-y;
}
#roundedPadding{
padding:0 15px;
}

This is the final result and should look like this (it’s not an image)

CSS Explanation:

html * {margin:0;padding:0;) is used to reset the margins and paddings which the browsers assign it by default.

The top and bottom div, should contain only width, height and the background image with no-repeat specified accordingly.

The middle div should have only width and background image with specified parameter repeat-y to the background, if the box is going to expand automatically in height - depending on the size of our content.

The roundedPadding div - we are assigning only left and right padding with the statement padding:0 15px; - This is because there already is a padding from the top and bottom (hint - the background images used in the top and bottom divs).

That’s it, this is the end of the tutorial. If you can find a good use, the source files are located here!