Rounded Corners With CSS

Oct 15th, 2008
Maruf scribbled this post.

This is a pretty simple but useful tutorial. A lot of people physically create round-edged backgrounds with applications like Photoshop. While this is time-consuming and a complete nightmare for updating purposes, there is a much more efficient way of doing this with the use of CSS. Only problem is that it doesn’t work in all browsers just yet e.g Internet Explorer However, it works with the cool, geeky browsers like Firefox. If anyone knows an I.E fix, holla!

For example, if you want this image to have rounded edges:

To do the following:

You can use the following CSS code:

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

 #nonround{
height:200px;
width:200px;
background:red;
margin-top:20px;
}
 
#round{
height:200px;
width:200px;
background:red;
margin-top:20px;
 -webkit-border-top-left-radius:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 -webkit-border-bottom-right-radius:10px;
 
 -khtml-border-radius-topleft:10px;
 -khtml-border-radius-topright:10px;
 -khtml-border-radius-bottomleft:10px;
 -khtml-border-radius-bottomright:10px;
 
 -moz-border-radius-topleft:10px;
 -moz-border-radius-topright:10px;
 -moz-border-radius-bottomleft:10px;
 -moz-border-radius-bottomright:10px;	
}

(the various rules are somewhat duplicated so they work across various browsers)

Cool, right? Right.