Rounded Corners Using CSS

One of the more popular things to do with CSS is to have elements with rounded corners. Some designers have even called this the holy grail of CSS. It is also one of those design elements that give your site a sophisticated and professional look. Most designers will tell you to achieve this look it is hard work, well don’t fear we can achieve the same look with a few lines of CSS.

First, we have to create four images which will create the rounded effect. The images should have a transparent background, but have a rounded edge effect with the color of your site background. Here is an example of the rounded images we used with a black background instead of a transparent one.

With the images now created, we can start looking at the CSS code to create the effect. Since we only want the effect on elements that we choose to apply it to, we will need to create a class for the effect. Lets call this class round. You can name the class anything you would like, but it is best to try to keep it simple but descriptive. We will need to use the images that we created, and we are going to use them as background images. This means we are at least going to use the background attribute in CSS. In order to use the images, we are going to also have to tell the CSS code where the images are located, to do this we will use url(). So far, our CSS should look like the following.

.round{
background: url(images/top_right.gif);
}

So far the CSS is simple, but we already have ran into an issue. If we were to use this CSS, we will have the image top_right.gif repeat, to create the rounded corners we do not want this to happen. We have to add additional values to the background attribute to stop the image from repeating. To do this, just add no-repeat after the url() but before the semi colon. Another issue that we have ran into is that the background starts in the top left corner, but this is the image for the top right corner. To solve this we need to add “top right” after the no-repeat value. With the added values the CSS code should look like the following now.

.round{
background: url(images/top_right.gif) no-repeat top right;
}

If we were to apply this style sheet to an element at this point it would just have one rounded corner. In order to get the top left corner rounded, we have to add a few things to the code, first we need to add the pseudo-element :before. (Note that Internet Explorer does not support the :before and :after pseudo-elements, and the effect will not appear for Internet Explorer users.) This will apply the style before any element that is in the round element. Another reason that the pseudo-element is needed, is because we have to use the content attribute. The content attribute can only be used with the pseudo-elements :before and :after. This attribute allows us to “float” the image for the rounded top left corner into the correct position. Again to do this we are going to use the url() value. Here is what the style sheet now looks like with all of this added.

.round:before{
background: url(images/top_right.gif) no-repeat top right;
content: url(images/top_left.gif)
}

Here again we run into another issue, this code will only make a semi circle instead of a round effect that we want to overcome this issue, we will only need to add the display attribute and set the value to block. Here is the final style to round both top corners.

.round:before{
background: url(’images/top_right.gif’) no-repeat top right;
display: block;
content: url(images/top_left.gif)
}

Now, if we put any element into the class round, the top two corners will have a rounded effect. To have the bottom corners rounded we only need to change a few things in the code itself. We have to change the images that we are using, and change the pseudo-element from :before to :after. Below is what the style sheet looks like to give the effect to the bottom corners.

.round:after{
background: url(’images/bottom_right.gif’) no-repeat top right;
display: block;
content: url(images/bottom_left.gif)
}

Now, to style the element that we are putting in the round class. If we were using this in an actual site then we would create an id. We would then give the element the id, and class. Remember that ids are used for one element, where classes are used for multiple elements. If you were wanting all of the element with rounded corners to have the same look, then use a class. In this example we are going to use both. So lets start with the round class. Lets make this class 350 pixels wide with a background that is a shade of grey. Here is the CSS code for that.

.round{
background: #DCDCDC;
width: 350px;
}

For the id, we will name it corners, and lets make it 150 pixels wide, with a dark green background. We also want the text to be bold and white.

#corners{
background: #2F4F4F;
width: 150;
color: #FFFFFF;
font-weight: bold;
}

That is it for the CSS to create this effect. Lets move on an look at the HTML part of the code.

Most of the HTML to create the rounded corner effect is very basic, we are just going to apply a class to the element. As we stated before, we can also apply an id to the element to create an even more custom feel for each element. Below is an example of both ways.

<div class=”round”>This is an element in the round class, since we have applied a background, and width attributes to the class, this element will inherit those values.</div>
<p class=”round” id=”corner”>This element will have the rounded corner effect, but will also have a different background color, width, and text color since it also has an id value</p>

Since our images only have the color if the background of the body to create the rounded effect, both elements will have a rounded effect, but with different background colors.

Here is the all of the CSS:

.round:before{
background: url(’images/top_right.gif’) no-repeat top right;
display: block;
content: url(images/top_left.gif)
}

.round:after{
background: url(’images/bottom_right.gif’) no-repeat top right;
display: block;
content: url(images/bottom_left.gif)
}

.round{
background: #DCDCDC;
width: 350px;
}

#corners{
background: #2F4F4F;
width: 150;
color: #FFFFFF;
font-weight: bold;
}

You can see an example of this code here