CSS Border Radius Generator
Round every corner independently, switch between pixels and percentages, and build elliptical blob shapes with the slash syntax. Copy production-ready border-radius CSS instantly.
How do you use the CSS border radius generator?
Pick a preset — Rounded, Pill, Circle, Leaf, Squircle or Blob — or drag the four corner sliders directly. Switch the unit between px and % to change how the radius is measured, untick Link all corners to shape each corner independently, and tick Elliptical corners to control the horizontal and vertical radii separately. The preview and the CSS update as you go.
What is the CSS border-radius syntax?
border-radius is a shorthand that rounds all four corners at once — border-radius: 12px is the common case. It accepts one to four values, plus an optional second group after a slash for elliptical corners. Each value can be a length (px, rem, em) or a percentage.
How do the one, two, three and four value shorthands work?
The values run clockwise starting from the top-left corner, which is the part most people get wrong. One value rounds all four corners equally. Two values set top-left with bottom-right, then top-right with bottom-left. Three values set top-left, then top-right with bottom-left, then bottom-right. Four values set top-left, top-right, bottom-right and bottom-left in that order — note that it is not the top, right, bottom, left order used by margin and padding.
How do you round only one corner in CSS?
Reach for the individual longhand properties instead of padding the shorthand with zeros: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. Writing border-top-left-radius: 24px states the intent far more clearly than border-radius: 24px 0 0 0, and it will not be silently clobbered when someone later edits the shorthand.
Should you use pixels or percentages for border-radius?
Use pixels when the curve should look the same whatever the element size — that is what you normally want for cards, inputs and buttons, because a percentage radius on a wide card produces a distractingly stretched corner.
Use percentages when the curve should scale with the box. Horizontal radii resolve against the element width and vertical radii against its height, which has a consequence worth remembering: on a non-square element a single percentage already produces an elliptical corner, not a circular one. That is exactly why border-radius: 50% turns a square into a circle and any other box into an ellipse.
What are elliptical corners and the border-radius slash syntax?
A corner does not have to be a quarter circle. Everything before the slash sets the horizontal radii, everything after it sets the vertical radii:
border-radius: 40px 10px 40px 10px / 10px 40px 10px 40px
Each corner becomes a quarter ellipse, and because the two axes are independent you get eight values of control in total. This is the mechanism behind the organic blob shapes you see in modern landing pages — the Blob preset above uses percentages on both axes so the shape keeps its proportions as the element resizes.
How do you make a circle, a pill or a squircle?
For a circle, apply border-radius: 50% to an element with equal width and height. For a pill or capsule, use a radius larger than half the element height, conventionally border-radius: 9999px. You do not need to compute the exact value: when radii would overlap, the browser scales all of them down proportionally, so an arbitrarily large number resolves to a clean stadium shape at any height.
A true squircle — the continuous-curvature shape used by iOS icons — is not reproducible with border-radius alone, because every corner it draws is a circular or elliptical arc. A generous percentage radius approximates it, which is what the Squircle preset does; the real thing needs corner-shape below, or an SVG path.
What is the CSS corner-shape property?
corner-shape changes what a corner is cut with rather than how large the cut is. It accepts round (the default), square, bevel, scoop, notch, squircle and the parametric superellipse() function, and it only takes effect where a border-radius is already set.
It is worth knowing about and not worth shipping unguarded: the property is still experimental and explicitly not Baseline, meaning it does not work in some of the most widely used browsers. Treat it as progressive enhancement behind a @supports (corner-shape: scoop) query, so browsers without it fall back to the ordinary rounded corner rather than losing the shape entirely.
Does border-radius clip content and shrink the clickable area?
Two side effects catch people out. First, backgrounds and borders follow the curve but child content does not — an image or a table inside a rounded card will still square off the corners unless you add overflow: hidden to the parent.
Second, border-radius trims the hit-testing area: the region outside the curve no longer receives pointer events. On a heavily rounded control that measurably eats into the touch target, so if you are working to a minimum tappable size, check that the remaining area still clears it rather than measuring the element's bounding box.
What is the browser compatibility for CSS border-radius?
border-radius works in every modern browser with no vendor prefixes, and has done since Internet Explorer 9 — the -webkit- and -moz- prefixes you still find in old snippets are dead weight. Percentages, the individual corner longhands and the elliptical slash syntax are all part of that same widely supported feature. Only corner-shape has limited availability.