Particularly last years, a lot of people still get it hard to make a rounded corner layout using a pure CSS, there will still be a lot of hacking here and there, whether its the PNGfix or IE6 problem. But since the birth of CSS3, a rounded corner layout is just a piece of cake to do. We can do this using the newly implemented border-radius.

How will this border-radius helped us ? Lets see an example result first.


This box using a border radius of 20px each corner.
With 400px width and 300px height.

How do we get the result ?

Firstly, a note to take, as the name said, border-radius, then it has to have to do with border. Yes, the border-radius extend the power of CSS border more to the curly corner.

The parameters for CSS3 are mainly :
border-xx-yy-radius: [ length ]

Where xx could be top / bottom and yy could be left / right, while length can be pixel measurement or in percentages.


Example :
border-top-left-radius: 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 10px;

Neat, right ? Now lets get deeper into the cross browser compatibility.
For Gecko-Engine based browser, we will use : -moz-border-radius-xxyy : [ length ]
For Webkit based browser, we will use : -webkit-border-xxyy-radius : [ length ]

Basically, nowadays browsers are supporting CSS3 syntax just well, but since not all visitors bother to upgrade their browser, then a save way to do that are just simply put them all together into the box.


Like this one :
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 10px;

If you want the complete same radius on all 4 corner, you may opt out xx and yy.

Conclusion and further reading

Since its now easy to create a rounded corner using CSS3, you should be able to create more dynamic web layout. I hope you enjoy this posts. For further reading :
Service by Jacob Bijani, Online border-radius generator
Rather more complete generator by CSS round
In depth reading into CSS3 Background

Give out comments if you enjoy this.

Incoming search terms:

  • css curly corners
  • css for curly borders
  • curly border in css
  • css rounded box
  • curly borders in css
  • curly border with css
  • curly borders
  • curly border for design
  • curly box border
  • curly corners