About Border Radius Generator
This border radius generator gives the top-left, top-right, bottom-right and bottom-left corners a slider each, running from 0 to 150px in 1px steps. The CSS panel writes the shorthand for you: one value when all four corners match (border-radius: 8px) and the full four-value form when they differ (border-radius: 24px 24px 48px 24px). The four values always run clockwise starting at the top left, which is the detail most people come here to check. You can also set a fill colour and a border up to 12px wide. Output is in pixels only; percentages and the elliptical slash syntax are explained below so you can adjust the copied rule by hand.
Border-radius shorthand: what one, two, three and four values mean
The same property accepts one to four lengths. Which corner each one lands on depends on how many you write.
| Values written | Example | Top left | Top right | Bottom right | Bottom left |
|---|---|---|---|---|---|
| One | border-radius: 8px | 8px | 8px | 8px | 8px |
| Two | border-radius: 40px 0px | 40px | 0px | 40px | 0px |
| Three | border-radius: 8px 16px 32px | 8px | 16px | 32px | 16px |
| Four | border-radius: 24px 24px 48px 24px | 24px | 24px | 48px | 24px |
This tool writes either the one-value or the four-value form. It never shortens to two or three values, so a diagonal pair comes out as 40px 0px 40px 0px, which behaves identically to 40px 0px.
Rounded corner recipes with the exact CSS
Each result is the border-radius line the tool produces for the slider positions shown.
Card or button with even corners
All four sliders at 8
border-radius: 8px;
Matching values collapse to a single number.
Chat bubble with a square tail corner
Top left 18, Top right 18, Bottom right 4, Bottom left 18
border-radius: 18px 18px 4px 18px;
Move the 4 to the bottom-left slider for a bubble that points at the other speaker.
Tab or card header, top corners only
Top left 16, Top right 16, Bottom right 0, Bottom left 0
border-radius: 16px 16px 0px 0px;
Panel under a full-width image, bottom corners only
Top left 0, Top right 0, Bottom right 16, Bottom left 16
border-radius: 0px 0px 16px 16px;
Leaf shape from two opposite corners
Top left 40, Top right 0, Bottom right 40, Bottom left 0
border-radius: 40px 0px 40px 0px;
Uneven blob with an outline
Top left 120, Top right 40, Bottom right 100, Bottom left 60, Border width 4, Fill colour #4f46e5
border-radius: 120px 40px 100px 60px; background: #4f46e5; border: 4px solid #221ab7;
The border colour is the fill made 18 lightness points darker. A white fill (#ffffff) gets a #d1d1d1 border.
Pill
All four sliders at 150
border-radius: 150px;
What the browser does when a radius is too big for the box
f = smallest of (edge length / sum of the two radii on that edge); if f < 1, every radius is multiplied by f
An oversized radius is not an error. The browser checks each of the four edges, finds the worst overlap and scales all the radii down by the same factor. Take a 300px by 100px button with border-radius: 150px. On the left edge the two radii add up to 300px but the edge is only 100px long, so f = 100 / 300 and every corner is drawn at 50px. That is exactly half the height, which is why a large value gives a clean pill instead of a broken shape. On a 200px square the same rule gives f = 200 / 300 and corners of 100px, a circle. Because all corners shrink together, a 150px corner next to a 30px corner keeps its 5 to 1 proportion.
Pixels, percentages and the slash syntax this tool does not write
A pixel radius draws the same curve whatever size the element is, which is what you want for buttons, inputs and cards that should look consistent across a layout. That is the only unit the sliders produce.
A percentage is measured against the element itself: the horizontal part of the curve against its width and the vertical part against its height. On a square, 50% gives a circle. On a rectangle, 50% gives an ellipse, not a pill, which is the usual reason a pill button comes out egg-shaped. Use a large pixel value for pills and 50% for circles and avatars.
A slash separates horizontal radii from vertical ones, so border-radius: 50px / 20px gives every corner a curve 50px wide and 20px tall. Each side of the slash takes one to four values in the same clockwise order, for example 30% 70% 70% 30% / 30% 30% 70% 70%, and that eight-value form is how organic blob shapes are made. To get there from this tool, copy the four-value rule and add the slash and second set of values by hand.
Problems people hit after pasting a border-radius rule
- An image inside the box still has square corners. Backgrounds and borders follow the curve, but child content does not. Add overflow: hidden to the rounded parent, or put the same radius on the image.
- Nested rounded boxes look uneven. Make the inner radius equal to the outer radius minus the gap between them. A 24px card with 8px of padding wants a 16px radius on the element inside.
- The corner looks sharper than the number suggests. A border is drawn inside the radius, so the inner edge of the border curves at the radius minus the border width. With a 12px border and a 12px radius, the inside corner is square.
- A table ignores the radius. With border-collapse: collapse the property has no effect on the table or its cells. Switch to border-collapse: separate with border-spacing: 0.
- A pill turned into an ellipse. The value is 50% on a non-square element. Replace it with a pixel value at least half the height.
Step by step
- 1
Drag Top left, Top right, Bottom right and Bottom left to set each corner between 0 and 150px.
- 2
Pick a Fill colour so the curve stands out in the live preview.
- 3
Raise Border width (0 to 12px) if you want an outline. The border colour is a darker shade of the fill, worked out for you.
- 4
Read the Values panel for the Shorthand and the per-corner Longhand figures.
- 5
Copy the .element rule from the CSS panel, or download it as style.css, and rename the selector to match your own.