Posted by: Peter Andrease

Posted on: February 17, 2011 9:14 am

-

This tutorial will show how to add curved corners to boxes using the curvycorners.src file, which you can download here.

Save the file to your root folder and point to the .src file in your html.

Now all you need to do is add a few simple lines of css to add curves to your div box.


-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;

You can now adjust the size of the curvature by amending the pixel amount, the bigger the amount the bigger the curve. You can even remove some of the corner curves so for instance only the top of your box has curves.

This css works fine in firefox, however as Internet Explorer is a different breed you may also require the following css to make sure it is cross-browser friendly:


-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

So your div would then be:

#curved-corners {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

Authors
Categories
Archives
Blogroll