CSS Border Radius Generator
You can give any element “rounded corners” by applying a border-radius through CSS.
The border-radius property takes between one and four length or percentage values, where one value sets the radius for all four corners at once, while four sets each individual corner.
Options
{{allCornersRadius}}{{unit}}
{{topLeftRadius}}{{unit}}
{{topRightRadius}}{{unit}}
{{bottomRightRadius}}{{unit}}
{{bottomLeftRadius}}{{unit}}
{{borderWidth}}px
Preview
CSS code
CSS Rounded Corners Properties
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |
Browser compatibility
| Chrome | Edge | Firefox | Opera | Safari |
|---|---|---|---|---|
| 5.0 | 9.0 | 4.0 | 10.5 | 5.0 |
Related resources