cssgridgen

CSS Border Radius Generator

Per-corner, elliptical, and inverted notched corners.

border-radius
border-radius
border-radius: 16px 16px 16px 16px;

/* Tailwind */
rounded-[16px]
Free tool

Including the corner border-radius can't make

Rounding corners is the easy half. The version people actually get stuck on is the inverted corner — the concave notch used on tickets, tabs and cut-out cards — which border-radius cannot produce at any value. That needs a mask, and it is built in here alongside the ordinary radii.

How to use it

  1. Pick a corner style

    Rounded for normal border-radius, or inverted for concave notched corners — which are a masking technique, not border-radius at all.

  2. Set the radius

    Link the corners for one value, or unlink to set each independently. The values run clockwise from the top-left in the output.

  3. Try elliptical corners

    Two radii per corner turns the quarter-circle into an ellipse, which gives a softer, wider curve than a plain radius can.

  4. Copy the code

    The border-radius declaration plus its Tailwind equivalent, or the full mask CSS for inverted corners.

Four values, clockwise from top-left

border-radius: 16px 16px 0 0 rounds the top two corners and leaves the bottom square. One value applies to all four; two values pair the diagonals. The order is the same clockwise-from-top-left convention as margin and padding, which makes it easy to remember and easy to get subtly wrong when you only supply three.

The slash makes ellipses

border-radius: 40px / 16px is not a fraction — the slash separates horizontal from vertical radii, so each corner becomes a quarter-ellipse rather than a quarter-circle. It is the cheapest way to get a curve that reads as designed rather than defaulted.

Inverted corners are a mask, not a radius

A concave corner has to be removed from the element, and CSS has no property that does that. The working technique layers four radial gradients as a mask, each anchored to one corner, cutting a circle out of it. Switch the tool to inverted mode and the full declaration is written for you, including the mask-size and mask-repeat that make the four layers tile correctly.

Frequently asked questions

How do I make an inverted border radius in CSS?
You cannot do it with border-radius — the corner has to be cut out of the element with a radial-gradient mask: mask: radial-gradient(28px at 0 0, #0000 98%, #000) 0 0 / 51% 51% no-repeat, repeated for each corner. border-radius only ever rounds a corner inward; carving a concave notch is a masking job.
How do I round only some corners?
border-radius takes up to four values, clockwise from the top-left: border-radius: 16px 16px 0 0 rounds the top two and leaves the bottom square. A single value applies to all four.
What does the slash in border-radius do?
It separates horizontal from vertical radii, making each corner an ellipse instead of a quarter-circle. border-radius: 40px / 16px gives a wide, shallow curve. The four values before the slash are the horizontal radii and the four after are the vertical ones.
How do I make a perfect circle or pill?
Use border-radius: 50% for a circle on a square element, or border-radius: 999px for a pill on any width. The large fixed value works because the browser caps the radius at half the shorter side.
Why does the inner corner look wrong on a rounded element with a border?
Because the inner radius is the outer radius minus the border width, and the browser computes that for you — which means a 16px radius with a 4px border leaves a 12px inner curve. If a nested element needs to sit flush inside, give it the smaller radius rather than the same one.
What is the Tailwind class for a custom border radius?
rounded-[16px] for a single value, or rounded-[16px_16px_0_0] with underscores for the four-value form. Named utilities rounded-sm to rounded-3xl and rounded-full cover the common cases.

Related tools