border-radius looks like a single simple property until a design calls for anything beyond four matching corners, at which point its shorthand order and its less common slash syntax for elliptical corners both become easy to get wrong by hand. A visual tool removes that friction, since the preview shows exactly what a given set of values looks like before any CSS is copied anywhere.
Every value and the CSS string built from it are calculated in your browser as you adjust the sliders, with nothing sent to a server at any point.
How this css border radius generator controls each corner
Four independent sliders map directly onto the four corners CSS itself recognises: top left, top right, bottom right and bottom left. Moving any one of them only changes that corner, so a card that should be square on top and rounded on the bottom, a common pattern for grouped list items, is exactly as easy to build as a rectangle with four matching corners.
The generated CSS always lists the four values in the exact order the border-radius shorthand expects, top left first and proceeding clockwise, so the string you copy is valid CSS regardless of how uneven the four corners are.
When to use different radii on each corner
Matching corners are the common case, but plenty of real interface patterns specifically need asymmetry. A tab that sits flush against the content below it wants rounded top corners and square bottom corners. A speech bubble or callout wants one corner left sharp to point at whatever it is attached to. A card grouped inside a list often only rounds the corners that touch the outer edge of the group, leaving the corners shared with a neighbouring card square.
- Tabs and segmented controls, rounded on the edge that does not touch the active content area.
- Speech bubbles and callouts, with one corner left square to suggest a pointer.
- The first and last items in a grouped list, rounding only the outer corners of the whole group.
- Cards that dock against a toolbar or header, square on the side that meets it.
- Use four matching corners for anything that does not have a specific reason to break that symmetry.
The border-radius shorthand order that trips people up
Written by hand, border-radius accepts one to four values, and when fewer than four are given the missing corners are filled in by rules that surprise people who have not memorised them: two values set top left and bottom right first, then top right and bottom left, three values leave bottom left matching top right, and only four values address every corner independently and unambiguously.
A second, less common part of the syntax lets each corner take two radii separated by a slash, producing an elliptical rather than circular curve, useful for organic shapes but easy to write incorrectly since the horizontal and vertical radii for all four corners are separated into two groups rather than interleaved corner by corner. This generator sidesteps both pitfalls by writing out all four corners explicitly every time.
Choosing values in pixels versus percent
Pixel values give a fixed, predictable curve regardless of how the box resizes, which is the right choice for buttons, chips and cards where the corner radius should stay visually consistent at any size. Percent values scale the curve relative to the box's own width and height, which is how a perfect circle or pill shape is produced from a square or a wide rectangle, since a corner radius of 50 percent always meets in the middle of whichever side is shorter.
As a rule, reach for pixels when a design calls for a specific, consistent curve, and reach for percent when the goal is a shape, like a circle or a stadium shaped pill button, that has to hold its proportions as the box scales.
Four corners, one declaration, no separate rendering path
Each of the four corner values is stored independently alongside the chosen unit, and the tool joins them into a single border-radius declaration in the standard top left, top right, bottom right, bottom left order the specification defines. The preview box is styled with that identical string, so the shape you see is exactly what the copied CSS will produce once pasted into a real stylesheet.
Because border-radius clips an element's own background and border but does not affect layout or the box's actual dimensions, the preview updates instantly with no layout recalculation beyond repainting the corners themselves.
Border radius and box shadow together
A rounded box very often needs a matching shadow, and box-shadow automatically follows whatever border-radius is set on the same element, so the two properties combine with no extra configuration. Building the shadow with a dedicated box shadow generator and pasting both declarations onto the same element produces a card or button that looks intentionally designed rather than assembled from two disconnected effects.
| Values given | How corners are assigned |
|---|---|
| 1 value | All four corners use that value |
| 2 values | Top left and bottom right use the first, top right and bottom left use the second |
| 3 values | Top left uses the first, top right and bottom left use the second, bottom right uses the third |
| 4 values | Top left, top right, bottom right, bottom left, each explicit |
How to build a CSS border radius
- 1
Set the top left corner
Drag the top left slider and watch the preview box round that single corner.
- 2
Set the remaining three corners
Adjust top right, bottom right and bottom left independently, or match them for a uniform shape.
- 3
Choose pixels or percent
Use pixels for a fixed curve or percent for a shape that scales, such as a circle or pill.
- 4
Copy the generated CSS
Copy the finished border-radius declaration and paste it directly into your stylesheet.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the css border radius generator.
Four values are read as top left, top right, bottom right, bottom left, proceeding clockwise starting from the top left corner. Fewer than four values trigger fallback rules that fill in the missing corners, which is exactly the ambiguity this css border radius generator avoids by always writing out all four explicitly.
Set every corner to 50 percent on a box with equal width and height, or set all four corners to a pixel value at least half as large as the shorter side. Either approach used across a border radius calculator produces a curve that meets exactly in the centre of the box, which is what a circular corner requires.
Yes, that is exactly what per corner border radius controls are for. Set the corners you want rounded to a positive value and leave the others at 0, which keeps them perfectly square while the rest of the box curves.
No. Rounded corners css only affects how the background, border and overflow are clipped visually, the element's actual layout box, including its hit area for clicks and its size for layout purposes, stays exactly rectangular regardless of how much the corners are rounded.
This almost always means overflow is not hidden and a child element, often an image or a background colour, is painting past the rounded edge of its parent. Adding overflow: hidden to the parent alongside the border-radius clips any children to the same curve.
This generator focuses on the common case of a single radius per corner, which covers circular curves and the vast majority of interface shapes. CSS itself additionally supports a slash syntax for elliptical corners with separate horizontal and vertical radii, useful for organic shapes beyond what a simple css rounded rectangle generator typically needs to produce.