Border radius generator
Shape all four corners with live CSS previews and pixel or percentage radii.
How it works & useful details
How to use this tool
Choose a shape preset or adjust each corner. Switch units to compare fixed and proportional corners.
Supported values and limitations
Exports four CSS radii in top-left, top-right, bottom-right, bottom-left order. Pixel values range from 0 to 200; percentages from 0 to 100. Browsers scale down overlapping radii, and percentage results depend on the target element’s dimensions.
About this tool
Border radius generator shapes all four corners of a box and produces the matching CSS with a live preview. Corner values can be set in pixels or percentages, which is useful for everything from subtle rounding to pill-shaped buttons.
The preview updates as you drag the controls, and the generated declaration is ready to copy. Nothing is applied to this site; the preview is sandboxed to the tool.
How to use it
- Set the radius for each corner, or link the corners to change them together.
- Switch between pixels and percentages depending on the effect you want.
- Watch the preview to confirm the shape.
- Copy the generated CSS declaration into your stylesheet.
Worked example
Top-left 32px, top-right 80px, bottom-right 32px, and bottom-left 80px produce:
border-radius: 32px 80px 32px 80px;The four values run clockwise from the top-left corner. Alternating small and large radii gives an organic, leaf-like shape that is popular for image masks and feature cards.
Pixels vs. percentages
Pixel radii keep the same curve whatever the element's size, which suits buttons, cards, and inputs. Percentage radii scale with the element: 50% on a square element makes a circle, and on a rectangle an ellipse, because the horizontal radius follows the width and the vertical radius the height.
When adjacent radii add up to more than the side length, browsers scale all radii down proportionally. So border-radius: 9999px is a common trick for fully rounded "pill" buttons. Keep radii consistent across a design system, for example 4px for inputs, 8px for cards, and fully rounded for tags, so interfaces feel coherent.
Frequently asked questions
When should I use percentages instead of pixels?
Percentages follow the element’s size, which is useful for shapes that should stay proportional; pixels give a consistent corner regardless of dimensions.
Why does a percentage radius look elliptical?
Percentage radii are resolved against both width and height, so when the box is not square the corner curves differently on each axis.
Does the preview affect the rest of the site?
No. Only the preview element is styled; the generated CSS is text you choose to copy.
Does border-radius clip the content inside?
Backgrounds and borders follow the curve, but child content can still overflow the corners. Add overflow: hidden (or clip) to the element to clip images and other children to the rounded shape.