CSS Border Radius Generator
Visually craft border-radius with a live preview.
border-radius: 24px;The border-radius Property
CSS border-radius rounds the corners of an element. A single value rounds all four corners equally; four values set the top-left, top-right, bottom-right, and bottom-left corners individually (clockwise from the top-left). Two and three value forms are shorthand: two means top-left & bottom-right then top-right & bottom-left, and three means top-left, then the two remaining opposite corners, then bottom-right. This generator emits the shortest equivalent form rather than always writing four values.
Every corner can be an ellipse, not just a circle. Turn on Elliptical corners and each corner gets a separate horizontal and vertical radius, written as two slash-separated lists:
border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%;
└── horizontal ──┘ └─── vertical ───┘That is how the organic “blob” shapes are made, and it cannot be expressed with one value per corner — try the Blob, Egg and Wave presets. When the two lists are identical the slash is redundant, so it is dropped.
Units matter more than they look. 50%is the one-liner that turns a square into a circle and a rectangle into an ellipse, because percentages resolve against the element's own width and height — it cannot be written in px at all. For a pill, a very large px value clamps to whichever dimension is smaller, which is why that preset uses one rather than a guess like 100px that stops looking right on a tall element.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Getting an asymmetric radius that matches a design.
- Building a squircle-like shape with elliptical corners.
- Comparing radius values against a live preview.
- Producing a pill or a circle from a rectangle.
- Getting the eight-value syntax right for elliptical corners.
Frequently Asked Questions
- Can each corner be different?
- Yes. The shorthand takes one to four values in top-left, top-right, bottom-right, bottom-left order, and any corner can also be set individually with its own longhand property.
- What does the slash in a radius mean?
- It separates horizontal from vertical radii, producing elliptical corners — `border-radius: 50px / 20px` is wide and shallow rather than circular. It is the only way to get a non-circular corner.
- How do I make a perfect circle or pill?
- `border-radius: 50%` on a square gives a circle; on a rectangle it gives an ellipse. For a pill, use a large fixed value such as `9999px` — it is clamped to half the shorter side, so it stays a pill at any width.
- What happens if the radii are too big?
- The browser scales all of them down proportionally so adjacent corners do not overlap. That is why two 100px radii on a 120px-wide box each render at 60px rather than producing a broken shape.
- Does the radius clip the content?
- It clips the background and border, but not overflowing children unless you also set `overflow: hidden`. An image inside a rounded card keeps its square corners until the parent clips it or the image gets its own radius.
- Do percentages behave like pixels?
- No — a percentage resolves against the element's own width for the horizontal radius and its height for the vertical one, so the corner shape changes as the box resizes. A pixel value stays constant.
Common errors and gotchas
- Using a radius larger than half the element, which clamps rather than erroring.
- Applying a radius to an element with `overflow: visible`, so children still show square corners.
- Setting a pixel radius on an element that scales, so the corner looks wrong at other sizes.
- Forgetting that a border and a radius interact, which changes the visible curve.
- Expecting a radius to clip a background image without `overflow: hidden` on the right element.