Michael Gearon

border-radius CSS property

Michael Gearon

Last updated on

CSS border-radius example

The border-radius property can be used to create rounded corners on elements. The value of property can either be in length or percentage units.

The border radius property is shorthand for border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius. As with writing the padding & margin shorthand, border-radius goes clockwise, from top left to the bottom right.

border-radius examples

.round-box{
border-radius: 10px;
}

.round-box-two{
border-radius: 40% 0;
}

If you wanted to have a rounded circle you can use the border-radius 50% on a square element to create a circle, for example:

.round-box{
border-radius: 50%;
}

If you wanted to have different radius on each corner then you can do this:

.round-box{
border-radius: 20px 40px 60px 80px
}

The output would be:

Border radius generator

There is an online tool that allows you to generates the border-radius for you. By default it is does add vendor prefix’s but as we will see next you may not need vendor prefix’s.

Browser support

Browser support is good for border-radius, it has been supported in all main browsers for many years and does not require any prefix’s such as -webkit- and -moz-.

Resources

Further reading

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.