Web Design that taps into the haromny and vision of your dreams.

CSS3 Border Radius Generator

By on in HTML/CSS Tools

151 words, estimated reading time 1 minutes.

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

Last updated on: Wednesday 15th August 2018

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.