Learning never exhausts the mind
Home >  Web Design > Tools > CSS3 Border Radius Generator

First published on by Updated

This CSS3 border-radius generator allows you to quickly style the border radius for an HTML element using a simple editor and copy the generated CSS code straight into your project.

The CSS3 border-radius property allows you to apply rounded corners to HTML elements without the need to use images, javascript or other hacks.

Use this CSS3 Border Radius Generator to easily generate border-radius code which you can copy and paste into your project.

CSS3 Border Radius


CSS3 Border Radius Explained

CSS3 border-radius take one parameter, that is the width of the curve from the central point. If all the corners are to have the same border-radius then only the one parameter needs to be specified.

#box {
border-radius: 5px;
}

If any of the corners are different you need to specify each one separately

#box{
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

CSS3 Border Radius Browser Compatibility

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-radius5.0

4.0 -webkit-

9.04.0

3.0 -moz-

5.0

3.1 -webkit-

10.5

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.