CSS Border Radius Generator
Top-left corner (px)：
Top-right corner (px)：
Bottom-right corner (px)：
Bottom-left corner (px)：
What is a CSS Border Radius Generator?
CSS Border Radius Generator provides a tool to generate CSS border radius values, allowing you to input corner values for each direction to preview the effect and generate corresponding CSS code.
CSS3 border-radius Property
| Property | Description |
|---|---|
| border-radius | Defines the radius of an element's corners. |
| border-top-left-radius | Defines the radius of the top-left corner. |
| border-top-right-radius | Defines the radius of the top-right corner. |
| border-bottom-right-radius | Defines the radius of the bottom-right corner. |
| border-bottom-left-radius | Defines the radius of the bottom-left corner. |
Our tool uses the first format, which is a shorthand for other syntaxes. For example:
border-radius: 10px 10px 10px 10px; The first value applies to the top-left corner, the second to the top-right corner, the third to the bottom-right corner, and the fourth to the bottom-left corner.
How to use the CSS Border Radius Generator?
- Set the values for top-left (px), top-right (px), bottom-right (px), and bottom-left (px).
- The generated code and preview will be displayed in the left panel.
- Click the "Copy" button to copy your CSS border radius code.