Results are provided for informational purposes only and may contain errors. Please verify important information independently. Use of this tool is at your own risk.
What the Border Radius Generator does
The Border Radius Generator lets you round each corner of a box separately with four sliders, from 0 to 100 pixels, and see the shape in a live preview. The output is a single border-radius declaration you can paste into your stylesheet. All four corners start at 20px.
The values are written in the order CSS expects: top-left, top-right, bottom-right, bottom-left, going clockwise from the top-left corner. Equal values give an evenly rounded card; different values give speech bubbles, tabs, leaf shapes and other asymmetric designs. The shorthand works in every current browser without prefixes.
When to use it
- Styling cards, buttons and input fields to match a design system's corner radius.
- Rounding only the top corners of a tab or the bottom corners of a dropdown.
- Creating a chat-bubble shape with one sharp corner.
- Trying different radii quickly instead of editing the CSS and reloading.
Worked example
Input
Top-left 24, top-right 24, bottom-right 4, bottom-left 24Output
border-radius: 24px 24px 4px 24px;Common questions about the Border Radius Generator
How do I make a perfect circle?
Give a square element border-radius: 50%. A percentage is relative to the element's size, so it stays round at any width. A pill-shaped button uses a large pixel value, such as 999px, instead.
Why does the background leak past the rounded corners?
Child elements with their own background can paint over the corners. Add overflow: hidden to the rounded parent, or give the child the same radius.
Can a corner be elliptical?
Yes. CSS accepts two radii per corner separated by a slash, such as border-radius: 50px / 25px. The generator writes the common circular form; edit the output to add the second value.
Does border-radius affect the shadow too?
Yes. A box-shadow follows the rounded outline, so the corners match. Build the shadow with the Box Shadow Generator and combine the two declarations.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.