DivitoDesign

Everything for the Web Professional

Round Corners with CSS

July 20, 2007 5 Comments →

Let’s start with a ’rounded-corner’ tutorial. In this tutorial you’ll learn how to make them. This isn’t the only method there is to produce round corners; this is just the method I use.

First, make two files, called index.html and roundcorners.css. We willl start with the index.html. The code provided isn’t everything you should have in your index.html. You should know how to add structure in your document. If not, please download the final code at the end of this tutorial.

This is very simple. We start with a DIV with id box. This is the box where all the elements of the box will appear in. In this box, we’ll add the corners and the content. Take a look below to view the codes.

1

<div id="box"></div>

As you can see, I have structured the document. I think this should be very easy to follow and the HTML part has been finished now!

We will continue with the CSS. Open up your roundcorners.css file now. You should understand we use images to give the box its round corners. I will use the following images.

top-left.gif
top-right.gif
bottom-left.gif
bottom-right.gif

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

body{
background-color: #CFCFCF;
}

#content{
float:none;
padding:20px 20px 0 20px;
}

#box{
width:300px;
background:#ffffff;
}

#top-left{
width: 19px;
height: 16px;
background: url(images/top-left.gif) top left no-repeat;
float:left;
}

#top-right{
width: 22px;
height: 22px;
background: url(images/top-right.gif) top right no-repeat;
float:right;
}

#bottom-left{
width: 22px;
height: 16px;
background: url(images/bottom-left.gif) bottom left no-repeat;
}

#bottom-right{
width: 22px;
height: 21px;
background: url(images/bottom-right.gif) bottom right no-repeat;
float:right;
margin-top:-21px;
}

As you can see, I’ve placed the div with id top-left at left (with float:left;) and made the div as small as the image itself. With the background style attribute I define a background (top-left.gif) and as you can see when you have done this too, it’ll display a perfect top left round corner (the perfection level of the round corner depends on your designing skills of course).

What I did next, is just repeat this step with all the divs and only change some small things. With top-right you should use float:right; and define another background image but the logic behind it stays the same.

I hope you like the outcome and keep experimenting!

index.html | roundcorners.css (right click > save as to download the files)

Information about the Author:

Name:

URL: http://twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

More on: CSS

5 Comments

  1. Stefan Vervoort’s Blog » Vacation + New project says:
    July 20, 2007 at 1:04 pm

    [...] you may have noticed, I’ve posted a new article today called Round Corners. I just wanted to add another article to the blog before I leave to have a little vacation with my [...]

    Reply
  2. Calculated says:
    August 16, 2007 at 12:06 pm

    gKdYFu good site. and interesting Hello! ,

    Reply
  3. g says:
    October 8, 2007 at 5:05 pm

    nice page

    Reply
  4. trabzonspor says:
    June 27, 2008 at 6:18 pm

    thanks

    Reply
  5. dora says:
    September 24, 2008 at 2:38 pm

    Thanks for this info. Here is another round corner generator: http://www.roundz.net/

    Reply

Please Respond and Give your Opinion

We use Gravatar to handle our avatars. Get one there!