CSS: border-radius
The border-radius allows you to add rounded corners to elements.
CSS Border radius generator – https://border-radius.com.
Curve ALL corners
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
![](http://cdn-5bbe9373f911c8130c30e7f4.closte.com/wp-content/uploads/sites/2/2018/10/wpchunks-css-border-radius-all.jpg)
Curve TOP corners
-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;
![](http://cdn-5bbe9373f911c8130c30e7f4.closte.com/wp-content/uploads/sites/2/2018/10/wpchunks-css-border-radius-top.jpg)
Curve BOTTOM corners
-webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;
![](http://cdn-5bbe9373f911c8130c30e7f4.closte.com/wp-content/uploads/sites/2/2018/10/wpchunks-css-border-radius-bottom.jpg)
Curve LEFT corners
-webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;
![](http://cdn-5bbe9373f911c8130c30e7f4.closte.com/wp-content/uploads/sites/2/2018/10/wpchunks-css-border-radius-left.jpg)
Curve RIGHT corners
-webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;
![](http://cdn-5bbe9373f911c8130c30e7f4.closte.com/wp-content/uploads/sites/2/2018/10/wpchunks-css-border-radius-right.jpg)