Border Radius Generator

A pixel radius is fixed: border-radius: 16px rounds every corner by exactly 16 pixels no matter how big the element is. A percentage radius is relative — it is measured against the element's own width and height, so the corners scale as the box grows or shrinks. That difference matters for shape. A percentage near 50% bends the corners so far they meet, turning a square into a circle or a rectangle into an ellipse, which is why avatars and round buttons use 50% rather than a fixed pixel value. Pixels keep a consistent, predictable softness across different-sized cards and inputs; percentages create fluid shapes that adapt. This generator lets you switch units per design (px up to 200, % up to 50) and shows the live result, so you can see exactly which behavior you want before copying.

For a circle, give an equal-sided (square) element border-radius: 50%. The percentage rounds each corner relative to the box, and at 50% the four arcs meet to form a full circle — this is the standard technique for round avatars and icon buttons. For a pill, the trick is different: apply a very large pixel value such as 9999px to an element that is wider than it is tall. The radius is capped at half the shorter side, so both ends become fully rounded semicircles while the straight middle stays flat, giving the classic tag or toggle look. Keeping the element square instead produces a circle again. This tool includes ready-made Circle and Pill presets, plus a live preview, so you can confirm the shape holds at your real element size before pasting the code.

Standard border-radius gives each corner one rounding value. The eight-value form splits each corner into a horizontal radius and a vertical radius, separated by a slash: the values before the slash set the horizontal radii and those after set the vertical ones. When a corner's horizontal and vertical radii differ, the arc becomes an asymmetric, egg-like curve rather than a clean quarter-circle. Combine four mismatched corners and the outline turns soft and irregular — the organic "blob," squircle, or pebble shapes popular in modern UI backgrounds and decorative elements. These are almost impossible to dial in by hand because eight numbers interact at once. This generator exposes all eight values, ships organic presets like squircle, pebble, and wave built on this syntax, and renders the result live so you can nudge a single radius and watch the silhouette change instantly.

When all four corners share the same pixel value, the generator checks whether that value matches Tailwind's default radius scale. If it lines up, you get the built-in utility — for example a small radius maps to rounded-md, and a very large value maps to rounded-full for circles and pills. When the value does not match a preset step, the tool falls back to Tailwind's arbitrary-value syntax, producing a class like rounded-[18px] that bakes the exact number in. Mixed corners are handled the same way, mapped to the appropriate per-corner utilities or arbitrary values. This saves you from memorizing the scale or guessing which named class equals which pixel amount. Alongside Tailwind, you can copy plain CSS shorthand, a styled-components template, or CSS custom properties — pick the format your project uses and paste it straight in.

em and rem are font-relative units, not absolute ones. One rem equals the root font size, and one em equals the current element's font size; in a typical setup both resolve to 16 pixels. So border-radius: 1rem is roughly a 16px radius, and 2rem is about 32px — much rounder than border-radius: 2px. The advantage is scalability: if a user or your design system bumps the base font size, radii built in em or rem grow proportionally and stay visually balanced with the text, while pixel radii stay frozen. Use rem when you want corners that track your typographic scale across a whole theme, and em when you want them tied to a single component's font size. This generator computes em and rem against a 16px base in the preview so the rounding you see matches what ships, and you can switch units anytime to compare.