What is a CSS Border Radius Generator?
A CSS border radius generator lets you build border-radius values visually and copy ready-to-use CSS in seconds. Instead of guessing values and reloading your browser after every tweak, you drag sliders for each corner and see the shape update instantly in a live preview box. This css border radius tool online eliminates trial-and-error and speeds up front-end development for buttons, cards, avatars, modals, and any element that needs rounded or custom-shaped corners.
How to Use This Tool
- Choose a preset — click Circle, Pill, Card, Squircle, or Tear to start from a popular shape
- Adjust the sliders — drag or type in the Top Left, Top Right, Bottom Right, and Bottom Left fields to shape each corner individually
- Toggle “Link all corners” to keep all four corners in sync while you drag a single slider — great for uniform rounding
- Switch between px and % — use px for fixed pixel rounding, % for shapes that scale with element size
- Watch the live preview update in real time so you can judge the result before copying
- Click “Copy CSS” to put the
border-radiusdeclaration on your clipboard and paste directly into your stylesheet
Understanding border-radius Values
The border-radius CSS property accepts one to four length or percentage values. CSS resolves them in clockwise order starting from the top-left corner:
| Position | Single value | Two values | Four values |
|---|---|---|---|
| Top Left | applied | 1st value | 1st value |
| Top Right | applied | 2nd value | 2nd value |
| Bottom Right | applied | 1st value | 3rd value |
| Bottom Left | applied | 2nd value | 4th value |
This tool writes the shortest valid shorthand automatically — if all four corners are equal it emits a single value; if opposite corners match it emits two values; otherwise it writes all four.
Common Use Cases
Cards and panels — a border-radius between 8 px and 16 px gives containers a modern, approachable look without looking bubble-like. The Card preset (12 px) is a safe default used in Material Design and Tailwind UI.
Buttons — most design systems round buttons by 4–8 px (subtle) or by 9999 px (fully rounded, pill shape). The Pill preset generates 9999px, which is a common technique because it works regardless of button height.
Avatars and profile images — border-radius: 50% on a square element produces a perfect circle. Use the Circle preset to generate this with a single click.
Squircle app icons — a squircle sits between a square and a circle (~30% on all corners). It is the shape used by iOS app icons and many modern illustration styles.
Asymmetric shapes — setting different values per corner (like the Tear preset: 50% 0% 50% 0%) creates leaf, droplet, or abstract decorative elements for hero sections and backgrounds.
px vs % — When to Use Which
Use px when you want the rounding to stay visually constant regardless of element size — for example, a card that is always 2 px rounded in the corner whether it is 200 px or 600 px wide.
Use % when the shape should scale with the element. 50% on a square element always produces a circle; 50% on a rectangle produces an ellipse. Percentage values are also useful for CSS art and generative shapes.
Shorthand Syntax
CSS allows you to write border-radius as a shorthand or as four individual properties (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius). The shorthand is almost always preferred. This generator outputs the shortest equivalent shorthand automatically.
Privacy
All calculations happen entirely in your browser. No values or generated CSS are ever sent to a server.
FAQ
How do I create a circle with CSS?
Set border-radius: 50% on an element that has equal width and height. Because 50% calculates to exactly half the element’s dimensions, all four corners become arcs that meet at the center, forming a perfect circle. Click the Circle preset in this tool to generate the correct CSS instantly.
What is the pill shape in CSS?
A pill (also called a “stadium” shape) uses a very large border-radius value — typically 9999px — so that the corners are always fully rounded regardless of element height. Because the browser clamps the radius at half the element’s smaller dimension, any sufficiently large value produces the same result. This technique avoids having to know the element’s exact height at design time.
Can I set different border-radius for each corner?
Yes. CSS accepts up to four values in border-radius, assigned clockwise from top-left: border-radius: top-left top-right bottom-right bottom-left. Each of the four sliders in this tool controls one corner independently. Disable “Link all corners” to move them separately and create asymmetric, organic, or decorative shapes.
When should I use % vs px for border-radius?
Use % when the shape must scale proportionally with element size — the classic example is 50% for circles and ellipses. Use px when you want a fixed visual corner that does not change as the element resizes, such as card corners or button rounding in a design system.
What is a squircle?
A squircle is a rounded square whose corners follow a super-ellipse curve rather than a circular arc. In CSS you can approximate a squircle by setting border-radius to around 30% on all four corners. This shape is popular in modern UI design — Apple uses it for iOS app icons, and many SaaS products use it for profile avatars and feature illustrations because it looks softer than a plain square but more structured than a circle.