CSS Border Radius Generator – Visual Rounded Corner Builder Online
Control all four corners independently or link them together. Choose px, %, or rem units. Start from a preset shape and tweak from there. Copy your CSS code instantly.
What Is the CSS Border Radius Generator?
The CSS Border Radius Generator is a visual tool for building border-radius CSS declarations without memorizing syntax or guessing values. Control all four corners individually or link them to move together, choose between px, %, and rem units, and select from preset shapes including Circle, Pill, Card, Leaf, and more. A live preview rectangle reflects every change instantly, and the generated CSS can be copied in one click.
How to Use the Tool
Start with a Preset or Custom Values
Click a preset button (Square, Rounded, Card, Pill, Circle, Leaf) to jump to a common shape. Or start with the sliders for full custom control.
Adjust Individual Corners
Uncheck 'Link all corners' to control Top-Left, Top-Right, Bottom-Right, and Bottom-Left independently. Switch between px, %, and rem units as needed.
Copy the Generated CSS
The live output always shows the correct shorthand or long-form border-radius rule. Click 'Copy CSS' and paste it directly into your stylesheet.
Why This Tool Is Useful
The CSS border-radius property supports up to eight values (two per corner for elliptical radii), making it significantly more complex than it appears. Getting a perfect circle requires exactly 50% radius. Creating a pill requires a very large value (e.g., 999px). Organic blob-like shapes require different values for all four corners, using the long-form slash syntax. Our generator abstracts all of this complexity into a visual slider interface, so you can focus on the aesthetic result rather than the syntax.
Instantly see how your values will look on a real element preview.
Jump to Square, Rounded, Card, Pill, Circle, Leaf, or Diagonal shapes instantly.
Unlink corners to create asymmetric, organic, or blob-like shapes.
px for fixed, % for proportional circles, rem for scalable responsive design.
Outputs single-value shorthand when all corners match, full 4-value rule when they differ.
No installation, no login. Open and use immediately.
Frequently Asked Questions
Set border-radius: 50% on an element that has equal width and height. The 50% is relative to the element dimensions, so an equal-sided element becomes circular. Our Circle preset does this automatically.
Use a very large border-radius value like border-radius: 999px. Any value larger than half the element's height will produce a pill shape. Our Pill preset sets this for you.
Pixel values (px) give fixed corner sizes regardless of element dimensions. Percentage values (%) are relative to the element's width and height. Using 50% on a square element creates a circle; on a rectangle, it creates an ellipse.
Yes. Uncheck 'Link all corners' in the tool to control each corner independently. The CSS format for 4 different corners is: border-radius: top-left top-right bottom-right bottom-left.
rem (root em) is a relative CSS unit based on the font-size of the root HTML element. Using rem for border-radius makes corners scale with the user's font size preference, improving accessibility.
Basic blob shapes can be created by setting significantly different values for each corner. For complex organic blobs, use CSS clip-path or SVG instead.
Yes, completely free with no account or download needed.