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

CSS3 Border Radius Generator

A CSS3 Border Radius Generator tool to quickly generate border-radius CSS declarations.

Written By on in HTML/CSS

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

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.

4.0 -webkit-
3.0 -moz-
3.1 -webkit-

Last updated on: Wednesday 27th June 2018



There are no comments for this post. Be the first!


Leave a Reply

Your email address will not be published.

If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me