CSS Border Radius Generator
Visually adjust border-radius values for individual or all corners and instantly copy the CSS code.
border-radius: 50px 50px 50px 0px;
What Is CSS Border Radius?
CSS border-radius is the property that rounds the corners of any HTML element's border box. Rather than sharp 90-degree angles, elements gain smooth curved corners that feel more approachable and modern. The property has been part of the CSS3 specification since 2011 and is now universally supported across all major browsers.
At its most basic, border-radius accepts a single value applied equally to all four corners. That value can be in px, rem, or percent. When you write border-radius: 8px, the browser draws an 8-pixel arc at each corner. When you use border-radius: 50% on a square element, each arc radius equals half the element's dimension — producing a perfect circle.
The property also accepts up to four separate values for independent corner control, following clockwise order: top-left, top-right, bottom-right, bottom-left. This means border-radius: 16px 0 16px 0 creates a diagonal wave by rounding opposite corners.
How to Use This Generator
Choose All Corners for symmetric components like buttons, cards, and inputs. Switch to Individual to control each corner independently — useful for asymmetric shapes or cards that sit flush against a container edge.
Select your unit: px keeps rounding constant regardless of element size; % scales proportionally (50% creates a circle); rem ties the radius to your root font size for consistent spacing scales.
Drag the sliders and watch the live preview update. When the shape looks right, click Copy Code and paste directly into your stylesheet, Tailwind config, or CSS-in-JS file.
Worked Examples
Pill Button
Set unit to px, drag All Corners to maximum (200px). The browser clamps this to the element's half-height, producing a fully rounded pill shape — the standard for CTAs, tags, and filter chips.
Circle Avatar
Switch to % unit, set All Corners to 50. Apply border-radius: 50% to an element with equal width and height. Result: a perfect circle — the universal technique for profile images and icon containers.
Card with Top Corners Only
Switch to Individual. Set Top-Left and Top-Right to 16px, leave Bottom corners at 0. Output: border-radius: 16px 16px 0 0. Correct for cards that sit flush against a container bottom or tab panels.
Frequently Asked Questions
What is CSS border-radius and what does it do?
CSS border-radius rounds the corners of an element's outer border edge. It accepts values in px, %, or rem. A value of 50% on a square element produces a perfect circle, while smaller values create subtle rounded rectangles common in modern UI design.
What is the difference between uniform and individual border-radius?
Uniform applies the same rounding to all four corners simultaneously. Individual mode sets each corner independently — top-left, top-right, bottom-right, bottom-left — allowing asymmetric shapes like a card with only the top corners rounded.
When should I use % vs px for border-radius?
Use px for constant rounding regardless of element size — ideal for buttons and inputs with fixed heights. Use % for proportional scaling — 50% on a square always creates a circle regardless of the element's actual dimensions.
How do I create a pill-shaped button?
Use border-radius: 9999px on a button element. This very large px value exceeds the element's actual height, so the browser clamps it and produces fully rounded left and right ends — the classic pill shape used in modern CTAs and tags.
Does border-radius affect layout or element size?
No. border-radius is purely visual and does not affect box model layout, width, height, or surrounding element positions. It clips the visual rendering of corners without changing the element's actual dimensions or document flow.