A border radius generator is the fastest way to round the corners of any box, button, image or card without guessing pixel values in your CSS file. This tool gives you four independent sliders — one per corner — a live preview box that updates as you drag, and a ready-to-copy CSS snippet using the real border-radius property. Rounded corners are one of the most-used visual details in modern web design, and getting the exact curve right by trial and error in dev tools wastes time that a visual generator removes entirely.
Arb Digital's front-end team reaches for a border radius generator constantly when building client sites — cards, buttons, avatars, modals and hero images all need consistent, deliberate corner rounding, and dialing that in visually is faster and more accurate than typing values blind and refreshing the browser repeatedly.
What This Border Radius Generator Does
This tool controls all four corners of a box independently: top-left, top-right, bottom-right and bottom-left, matching the exact order CSS uses internally. Each slider runs from 0 (a sharp square corner) up to 120 units, and the preview box above updates in real time as you move any slider — so you always see exactly what your rounded corners will look like before you touch your stylesheet. When all four sliders share the same value, the generator automatically collapses the output to the clean single-value shorthand (border-radius: 24px;) instead of writing out four repeated numbers, which keeps your CSS tidy.
You can also switch the output unit between pixels, percent and rem, since different design systems favor different units for corner rounding depending on whether the shape needs to scale with font size, container size, or stay fixed in absolute pixels.
How to Use the Border Radius Generator
- Drag the four sliders. Move top-left, top-right, bottom-right and bottom-left independently to shape the preview box exactly how you want it.
- Use "Link all corners" for a quick uniform radius. Check the box and one slider will drive all four corners together — ideal for standard rounded cards and buttons.
- Pick your unit. Choose px for pixel-precise rounding, % for corners that scale relative to the box itself (useful for perfect circles/pills), or rem for rounding tied to your base font size.
- Watch the live preview. The box above the output updates instantly with every slider movement, so there's no guesswork.
- Copy the CSS. Click "Copy CSS" and paste the generated
border-radiusdeclaration directly into your stylesheet, component, or inline style.
The Border-Radius Property, Explained
CSS's border-radius property accepts one to four values, always applied in the order top-left, top-right, bottom-right, bottom-left — the same clockwise order this tool uses internally, starting from the top-left corner. As MDN's border-radius reference documents, a single value like border-radius: 24px; rounds all four corners equally, while four values like border-radius: 8px 24px 8px 24px; round each corner independently for asymmetric shapes. Each corner can also technically take two values (horizontal and vertical radius, separated by a slash) to produce elliptical rather than circular corners — this is what gives you organic, "blob"-style shapes rather than uniform curves.
A percentage value is measured relative to the element's own width and height, which is why border-radius: 50%; on a square element produces a perfect circle — each corner's radius becomes exactly half the box, so the curves meet in the middle on every edge. That's the trick behind almost every circular avatar and icon button you see on the web; it works reliably as long as the element's width and height are equal.
Common Border Radius Patterns
A few corner-rounding patterns come up again and again in real interface design, and this generator makes each one quick to dial in:
- Subtle card rounding (6–12px) — the standard for cards, panels and containers in most modern design systems; enough to soften edges without looking playful.
- Pill buttons — set the radius to half the button's height (or use 999px/50% as shorthand) to get fully rounded, capsule-shaped buttons.
- Perfect circles — link all corners and set the unit to % at value 50 on a square box (equal width and height) for avatars, icon buttons and badges.
- Asymmetric "blob" shapes — set each corner to a noticeably different value (for example 60px 20px 60px 20px) to create the organic, hand-drawn feel popular in hero sections and illustrations.
- Speech-bubble corners — round three corners generously and leave one corner sharp (0) to create a pointer-like tail effect, often combined with a small triangle pseudo-element.
Border Radius and Browser Support
The good news for anyone shipping border-radius today is that it needs zero vendor prefixes or fallbacks — it has been supported in every major browser since Internet Explorer 9, and modern engines (Chrome, Firefox, Safari, Edge) all implement it identically per the CSS spec. That means the CSS this generator outputs is safe to ship directly to production without a build step or autoprefixer pass. The one nuance worth knowing: border-radius only visually clips a box's own background and border by default. If you place an image or another element inside a rounded box and it overflows, you also need overflow: hidden; on the parent to actually clip the child content to the same curve.
Border Radius vs. Clip-Path
Border-radius handles rectangular boxes with rounded corners extremely well, but it can't produce every shape. For more complex geometry — triangles, hexagons, stars, or diagonal cuts — CSS's clip-path property is the right tool instead, since it can clip an element to an arbitrary polygon or path rather than just softening corners. For the vast majority of UI work — cards, buttons, images, modals, avatars, inputs — border-radius is simpler, better supported for animation, and the correct default choice; reach for clip-path only when the shape genuinely isn't rectangular.
Consistent corner radii, spacing and color are small details that compound into a site that feels premium. Arb Digital designs and builds fast, cohesive websites where every detail — including the corners — is deliberate.
Explore Web Design Services All Free ToolsCommon Mistakes to Avoid
- Forgetting overflow:hidden on nested content. Rounding a container doesn't automatically round a child image or element that overflows its bounds — add
overflow: hidden;to the parent. - Mismatched radii across a component set. Buttons, inputs and cards on the same page should generally share the same radius scale (e.g. 6px, 12px, 24px) for visual consistency — random values per component look unpolished.
- Using % for non-square elements expecting a circle. A 50% radius only produces a true circle when width equals height; on a rectangle it produces an ellipse or stadium shape instead.
- Over-rounding small elements. A radius larger than roughly half an element's shortest side just gets clamped to that maximum by the browser — there's no visual benefit to values beyond that point.
- Ignoring focus and hover states. If a button's radius changes on interaction, make sure the transition on
border-radiusis smooth rather than an abrupt jump, which this preview lets you check visually.
Related Free Tools From Arb Digital
Pair this generator with the CSS gradient generator and the box shadow generator to build a complete card or button style in minutes. If you're picking colors for the box background, the HEX to RGB converter and RGB to HEX converter handle color-format conversion, and the CSS flexbox generator and CSS grid generator help lay out the containers these rounded boxes live inside. Browse everything at our free online tools hub.
Pixels, Percentages and the Pill Shape Trick
A radius given in pixels is absolute: border-radius: 12px curves every corner by the same 12 pixels no matter how big the box grows, which keeps buttons and cards looking consistent across a design system. A radius given as a percentage is relative to the element's own dimensions, and that unlocks shapes pixels cannot. Set border-radius: 50% on a square and you get a perfect circle; set it on a wide rectangle and you get an ellipse. Set border-radius: 9999px (a huge pixel value) on a button and you get the popular "pill" shape, because the radius is capped at half the shorter side no matter how absurd the number.
The practical takeaway is to match the unit to the intent. Use pixels for the subtle, fixed rounding of cards, inputs and modals where you want the same gentle curve everywhere. Use 50% when you specifically want a circle or ellipse that tracks the element's size — avatars, icon badges, dots. Reach for the giant-pixel pill trick for tags and call-to-action buttons. Knowing which tool produces which effect stops the frustrating trial-and-error of nudging numbers until something looks right.
Related tool: Lorem Ipsum Generator.
Related tool: UUID Generator.
Frequently Asked Questions
Use the four-value form of border-radius, in order: top-left, top-right, bottom-right, bottom-left. Set the corners you don't want rounded to 0. For example, border-radius: 12px 12px 0 0; rounds only the top two corners, which is common for cards that sit flush against the bottom of a section.
Give the element equal width and height, then set border-radius to 50% (or use the "Link all corners" option here with the unit set to %). Because the radius is calculated relative to the box's own size, a 50% value on a square element produces a perfectly round circle every time.
Pixels give a fixed, absolute curve that doesn't scale with the element. Percent is relative to the element's own width/height, so it scales proportionally as the box resizes — useful for circles and pills. Rem is relative to the root font size, so rounding scales if a user changes their browser's base text size, which can help with accessibility.
By default, border-radius only clips the element's own background and border. To also clip an overflowing child image or element to the same rounded shape, add overflow: hidden; to the parent container alongside the border-radius declaration.
No. Border-radius has been supported without any vendor prefix in every major browser since Internet Explorer 9, and all current browsers implement the property identically. You can copy the CSS from this generator straight into production with no fallback needed.
Yes. Because border-radius is a standard animatable CSS property, you can transition it smoothly with transition: border-radius 0.2s ease; — for example, morphing a square button into a pill shape on hover, or rounding a card further when it's active.
This tool runs entirely in your browser — nothing you enter is uploaded or stored.
