Rounded corner & shape generator
Adjust the horizontal and vertical radii of the four corners in px or % and preview the shape. Copy or save the generated border-radius CSS. Preview width, height, and color are not included in the CSS.
What you can do
Adjust rounding from a preset
Choose from 8 presets, including rounded corners, a capsule, and a leaf, and adjust the radii. Selecting a preset replaces the radii and unit.
Give each of the four corners different rounding
Turn off the same-radius setting to enter the horizontal and vertical radii for the top-left, top-right, bottom-right, and bottom-left corners separately.
Check and get the CSS
Generate CSS after checking the shape. Switch between shorthand and individual corner declarations, then copy it or save it as a CSS file.
How to use
Choose a preset and unit
Enter radii directly, or choose a preset to start adjusting. Changing the unit does not convert the numbers.
Compare rounding and shape
Enter one value to use the same radius. To vary it by corner, uncheck the option and adjust the horizontal and vertical values.
Check the size if needed
In preview settings, you can change the width, height, and preview color. These are not included in the output CSS.
Generate CSS, then copy or save it
Press “Generate CSS” and choose the format you want. If you change the radii, unit, or size, generate it again.
Useful when
Shape the corners of cards and buttons
When you want to create CSS for page components by rounding all four corners equally or rounding only the top corners.
Create an asymmetric rounded background
When you want to change horizontal and vertical rounding by corner to create outlines resembling leaves or organic shapes.
How radii, units, and display size relate
Horizontal and vertical are two directions of the same corner
The horizontal radius controls horizontal rounding, and the vertical radius controls vertical rounding. A corner is not rounded if either value is 0. Specify the four corners clockwise from the top left.
% uses width and height as separate references
Horizontal % values are relative to the element’s width, and vertical % values to its height. Even with the same numbers, a square and a tall or wide rectangle look different. px specifies a length directly.
Oversized radii shrink by the same proportion
If the sum of adjacent radii exceeds the side length, all 8 display radii are reduced by a common factor. The input values and generated CSS remain unchanged. In the details after generation, you can check the radii used for the preview.
The range of outlines rounded corners can express
border-radius makes corners into elliptical curves. It cannot create indentations or arbitrary polygons. The squircle preset approximates the shape with elliptical corners; it does not reproduce the mathematical curve exactly.
Frequently asked questions
Can I set different rounding for each corner?
Yes. Uncheck “Use the same radius for all corners” to enter the horizontal and vertical radii of each corner separately. Checking it again sets all radii to the top-left horizontal radius.
Are the numbers converted when I switch units?
No. The numbers are kept, and only the unit changes. If a value above 100 remains after switching from px to %, enter it again within the range of 0–100.
Are the preview’s size and color included in the CSS?
No. The output contains only the border-radius declarations. Set the width, height, and background color in the page or component where you use it.
Why does the displayed shape have smaller rounded corners than the radii I entered?
The browser reduces the displayed radii by the same proportion to keep corner curves from overlapping. You can check the reduction factor and the px values for each corner under “Radii used for display.”
Input and results
- Radii
- Specify all 8 values in the same unit: 0–100% or 0–9999px. Decimal values are also accepted.
- Preview
- Preview width and height are integers from 1–400px. Width that does not fit can be scrolled horizontally within the field.
- Output
- border-radius shorthand or declarations for each of the 4 corners. Copy or save border-radius.css.
- Not included
- Width, height, background color, and image or SVG exports.