---
title: CSS3 Border Radius Property
---
## CSS3 Border Radius Property

You can make element's borders round by using `border-radius` property. You can set one to four values to `border-radius` property:

* `border-radius: 5px;` - this rule will apply to all corners
* `border-radius: 5px 10px`- This rule will apply first value to *top-left* and *bottom-right*, second value to *top-right* and *bottom-left*.
* `border-radius: 3px 5px 7px 10px` - This rule will apply first value to *top-left*, second value to *top-right*, third value to *bottom-right*, fourth value to *bottom-left*.
* In case of three values, the second value applies to both *top-right* and *bottom-left*.

#### More Information:

* [MDN - border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
* [CSS-Tricks - border-radius](https://css-tricks.com/almanac/properties/b/border-radius/)