A border-radius property on an element is the CSS mechanism that rounds every corner of a rectangular box; a border radius generator online is a small visual tool that lets you set each of the four corners independently, watch the result, and copy back a single compressed declaration such as border-radius: 12px 0 24px 8px;. The tool accepts a numeric radius per corner in clockwise order, switches between fixed pixel units and size-relative percentages, renders the live preview at the box dimensions it will sit inside, and emits the shortest correct shorthand that the CSS spec defines. That combination — per-corner control, unit choice, real-size preview, and compressed output — is what you actually need when shaping buttons, cards, inputs, avatars, or speech bubbles, because guessing radii by hand or trying to edit a single value four times across a stylesheet is the standard path to mismatched corners and bloated declarations.
Most design tasks do not call for four different radii, and that is the point of a generator that returns shorthand: when three corners share a value, the declaration collapses, and when all four match it collapses further to a single token. The CSS spec allows one to four radius values per axis, with corners ordered top-left, top-right, bottom-right, bottom-left, and the slash form lets you separate horizontal and vertical radii for elliptical corners. Generators are most useful precisely here, because they apply those rules for you and hand you a declaration you can paste without thinking about the order.
How the Shorthand Actually Behaves
Because the shorthand is the reason a generator is faster than typing by hand, it is worth pinning down the four behaviors that drive every compressed result. The MDN reference for the property is the authoritative spec for this shorthand, and the generator follows it exactly:
- One value applies to all four corners, for example border-radius: 8px;.
- Two values apply to opposite corners in the diagonal pairs: first is top-left and bottom-right, second is top-right and bottom-left.
- Three values set top-left, the diagonal pair (top-right and bottom-left), and bottom-right.
- Four values fill each corner in clockwise order starting from top-left.
A slash separates the horizontal from the vertical radius when an elliptical corner is wanted: border-radius: 12px / 24px; is a 12-pixel horizontal and 24-pixel vertical ellipse on every corner. A generator that copies only what you set will skip any of those positions the moment they agree with a previous one, which is how a four-corner visual input collapses into two or even one token in the output box.
Pixels or Percentages: Choosing the Right Unit
The unit you pick changes how the curve behaves as the box itself changes shape. The two are not interchangeable, and the choice belongs in the design step rather than at copy time.
| Unit | Curve behavior | Best fit |
|---|---|---|
| px (pixels) | Fixed curve regardless of box size | UI controls, buttons, inputs, badges |
| % (percentage) | Scales with the element's box dimensions | Avatars, hero shapes, full-bleed panels |
| Mixed | Different physical curves per corner at the same percentage | Asymmetric shapes from a single value |
A useful practical detail: border-radius: 50%; on a square box produces a circle, and on a rectangle produces an ellipse. That single fact is why percentage is the right unit for image avatars and decorative shapes, while pixel values stay predictable for buttons that live next to text.
Generate a Border Radius Online in Four Steps
The fastest path from a blank stylesheet to working rounded corners uses a generator that handles unit switching, live preview, and shorthand compression. Each step corresponds to one control on the CSS Border Radius Generator:
- Enter a radius for each of the four corners in clockwise order. Type a number into the top-left, top-right, bottom-right, and bottom-left inputs. Leave a field empty or matching another corner if you want the shorthand to compress.
- Choose the unit per corner. Toggle between pixels for fixed curves and percentages for size-relative curves. Switching units does not change the visual curve until you adjust the box width and height used by the preview.
- Inspect the preview at the real box dimensions. Set the preview box to the width and height the component will actually have on the page so ellipses and inside-corner flatness show up before the code is pasted.
- Copy the compressed declaration and test it on the real component. Use the copy button, paste into your stylesheet, and reload to confirm the curve reads the way you saw it in the preview.
That last step is not optional: a percentage radius on a 200px-by-80px pill and the same percentage on a 400px-by-80px pill produce visibly different curves, so the preview must run at the production dimensions to be a trustworthy test.
Reading the Compressed Output
The compression rules from the spec map directly to what the tool returns, so you can predict the output shape before you click copy. A 12px radius on every corner prints as border-radius: 12px;. Matching top-left and bottom-right with a different top-right and bottom-left prints as border-radius: 12px 24px;. Three distinct corners print as border-radius: 12px 24px 32px;, and four distinct corners print as border-radius: 12px 24px 32px 8px;. Elliptical corners appear after a slash, as in border-radius: 12px / 6px;.
When the tool collapses output, you are not losing control — you are gaining readability and a smaller byte count in the served CSS. The same collapsing is what a minifier would do, but applying it at edit time means you read the shorthand the way it will appear in production.
Common Patterns and When to Use Them
A small set of recurring shapes covers most rounded-corner work in real interfaces, and recognizing them speeds up both the input step and the reading of production CSS. Card surfaces, panels, and list rows typically take a single value across all four corners, so the output collapses to one token. Pills and tags keep their curve by setting a value at or near half the element height. Asymmetric UI shapes — a feature card with a flat top and rounded bottom, or a banner with one cut corner — use three or four distinct values, which is where a generator saves the most typing.
- All four corners equal: one token, used on most cards, inputs, and surfaces.
- Top corners equal, bottom corners equal: two tokens, used on hero sections or anchored panels.
- One flat corner: three tokens, used on tabs that butt against a container edge.
- Diagonal cut: four tokens, used on feature cards and decorative shapes.
- Pill and circle: a single value at or above half the height for pills; a single percentage on a square for circles.
When none of those patterns fits, the generator still works — type what you want, copy the output, and move on.
Working Examples for Common Shapes
Three concrete declarations show how per-corner control plus unit choice covers most button, card, and avatar needs. The exact visual result depends on the box the element is rendered in, and the preview is the only place those differences show up before the code is pasted.
| Shape | Corner values | Unit | Compressed declaration |
|---|---|---|---|
| Soft card | All four corners equal | px | border-radius: 12px; |
| Pill button | All four corners equal | px | border-radius: 999px; |
| Round avatar | All four corners equal | % | border-radius: 50%; |
| Tabs against header | Three distinct corners | px | border-radius: 12px 12px 0 0; |
| Asymmetric feature card | Four distinct corners | px | border-radius: 16px 4px 16px 4px; |
Each declaration matches the spec's compression rules and each can be pasted directly into any CSS rule. Only the avatar cell depends on the box being square: on a rectangle the same 50% declaration produces an ellipse, which is the intended behavior for responsive images that fill their container.
Tips and Pitfalls When Copying the Output
Most issues with rounded corners come from one of three places: unit choice, preview size, or overloading the property when one is not enough. The following list captures the checks that catch mistakes before the CSS reaches the browser.
- Preview at production size. Percentage radii look correct at one box dimension and wrong at another, and pixel radii on a very small element can swallow detail.
- Keep shorthand readable. If you need a comment to remember which corner is which in a four-token declaration, leave the comment; the bytes saved by minification are not worth the maintenance cost.
- Do not stack unrelated properties. Combining border-radius with border-image on the same element can clip the radius in some engines; test rather than assume.
- Watch the inside corner. When the radius approaches the box height, the inner edge curves meet and the box turns into a pill; that is usually intended but worth confirming in the preview.
- Copy the comma cleanly. The compressed output uses one declaration per axis pair; do not paste stray commas from older snippets that used the deprecated four-property form.
A quick sanity test for any new shape is to paste the declaration into a one-line rule and reload the page; if the curve reads the way the preview showed, the work is done. If it does not, the most common cause is a box dimension different from the one used in the preview, and the fix is to re-test at the real dimensions rather than to retune the radii by eye.
Where a Border Radius Generator Fits in a CSS Workflow
Rounded corners are small, but they appear on almost every interactive surface a user touches. A generator is a tidy middle step between the visual mock-up and the stylesheet: it pins down per-corner values, applies the spec's compression rules, and hands back a declaration that reads the way it will ship. Once that declaration is in place, the same tools that handle flexbox layout in CSS and three-by-three CSS grid layout can be used to position the rounded element without losing the curve, because border-radius clips the box at paint time and does not interact with the layout algorithm.
Beyond CSS itself, keeping a generator tab open while you build small UI components is faster than guessing by hand, and it produces copy-paste-ready output that does not need a second pass to clean up. For developers who format JSON, write directory trees, and generate cron schedules in the browser, a border-radius generator is the same kind of quick utility: small, single-purpose, and immediate.
If you're weighing options, How to Get a Box Shadow in CSS with a Visual Generator covers this in detail.
If you're weighing options, Create a 3D Button in CSS with a Visual Generator covers this in detail.