CSS Border Radius Generator
Set each corner independently or link them to edit all 4 corners at once, customize colors, and copy ready-to-use CSS code instantly.
border-radius: 20% 80% 20% 80%;
background-color: #2563eb;
How to Use the CSS Border Radius Generator
The CSS border-radius property allows you to round the corners of element boxes. By configuring individual corners or linking them together, you can quickly create uniform buttons or unique organic shapes.
Linked Corners
Toggle the link checkbox to apply uniform curvature values simultaneously across all four corners.
Color Customization
Pick a custom shape background color directly to preview how your customized container looks.
Clean Code Export
Copy concise, standards-compliant shorthand border-radius and background color code ready for stylesheets.
Pro Tip: Using percentage units allows your border-radius shapes to scale fluidly with element resizing, making them ideal for responsive card designs and image containers.