BuildUtilities

CSS Border Radius Generator – Free Online Tool

Generate CSS border-radius with visual corner controls.

✦ FreeNo SignupInstantCSSCSS Animations & Effects Guide
border-radius: 16px 16px 16px 16px;

Example

Input

Top-left: 20px, Top-right: 0, Bottom-right: 20px, Bottom-left: 0

Output

border-radius: 20px 0 20px 0;

Creates a shape with diagonally rounded corners.

How to Use CSS Border Radius Generator

  1. 1

    Adjust Corners

    Use sliders to set each corner's radius independently.

  2. 2

    Preview

    See the rounded shape update in real time.

  3. 3

    Copy CSS

    Copy the border-radius CSS property.

Common Use Cases

  • ✦Creating custom button shapes
  • ✦Designing unique card layouts
  • ✦Building organic UI elements

Embed This Tool

Add this tool to your website or blog with a simple iframe embed.

<div style="max-width:480px"><iframe src="https://buildutilities.com/embed/css-border-radius-generator?ref=embed" width="480" height="360" frameborder="0" style="border-radius:8px;border:1px solid #2a2e3a;width:100%"></iframe><p style="font:11px sans-serif;color:#888;margin:4px 0 0;text-align:right">Powered by <a href="https://buildutilities.com/css-border-radius-generator?ref=embed" target="_blank" rel="noopener">BuildUtilities</a></p></div>

Share

Share a link to this tool. Results can be passed via URL parameters.

https://buildutilities.com/share/css-border-radius-generator

More CSS Tools

Visual CSS generators with live preview and copy-paste output.

▢ CSS Box Shadow Generator▧ CSS Gradient Generator◆ CSS Mesh Gradient Generator⬚ CSS Flexbox Playground▦ CSS Grid Generator↔F CSS Clamp Generator
View all CSS tools
Tip Jar