Border Radius CSS Generator

Playground

px
px
px
px
px
Preview
border-radius: {{settings.borderRadius}}px;
-webkit-border-radius: {{settings.borderRadius}}px;
-moz-border-radius: {{settings.borderRadius}}px; border-top-left-radius: {{settings.topLeft}}px;
border-top-right-radius: {{settings.topRight}}px;
border-bottom-right-radius: {{settings.bottomRight}}px;
border-bottom-left-radius: {{settings.bottomLeft}}px;
-webkit-border-top-left-radius: {{settings.topLeft}}px;
-webkit-border-top-right-radius: {{settings.topRight}}px;
-webkit-border-bottom-right-radius: {{settings.bottomRight}}px;
-webkit-border-bottom-left-radius: {{settings.bottomLeft}}px;
-moz-border-radius-topleft: {{settings.topLeft}}px;
-moz-border-radius-topright: {{settings.topRight}}px;
-moz-border-radius-bottomright: {{settings.bottomRight}}px;
-moz-border-radius-bottomleft: {{settings.bottomLeft}}px;
 {{copyMessage}}

Definition and Usage

The border-radius property defines the radius of the element’s corners.

Tip: This property allows you to add rounded corners to elements!

This property can have from one to four values. Here are the rules:

Four values – border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):