Free Online CSS Border Radius Generator
Create rounded and blob-shaped corners with a live preview.
Four values are applied clockwise from the top-left corner. In percentage mode the radius is calculated from the element's width and height, which can produce an elliptical corner.
About the CSS Border Radius Generator
The border-radius property rounds the corners of an element. It is one of the simplest ways to
make a website feel softer and more modern, and it works on buttons, cards, images, inputs, modals, avatars,
and almost any other box. A small radius can make a control feel friendly; a large radius can turn a card
into a pill or a blob. This generator lets you tune each corner separately and see the result immediately.
The four sliders correspond to the top-left, top-right, bottom-right, and bottom-left corners. With Link all corners enabled, moving one slider updates the other three so the shape stays symmetrical. Turn linking off to create speech bubbles, leaf shapes, asymmetric cards, or decorative panels. Switch between pixels and percentages to control how the corner behaves when the element changes size.
Pixels vs percentages
- Pixels give a fixed curve that stays the same at every screen size. This is the safest choice for buttons, inputs, and cards.
- Percentages scale with the element. A value of 50% on a square produces a perfect circle, which is useful for avatars and badges.
- Elliptical corners are possible with slash syntax such as
50% / 20%, although this generator keeps the horizontal and vertical radii equal. - Overlapping values are automatically reduced by the browser if the radii are too large for the box, so extreme values may not look as expected.
How to use the generator
- Choose pixels or percentages.
- Keep linking on for a uniform shape, or unlink the corners for an asymmetric design.
- Drag the sliders and watch the live preview.
- Copy the generated CSS into your stylesheet.
Design tips
Match the radius to the scale of the element. A 4–8 pixel radius feels subtle and professional, while 16–24 pixels feels friendly and app-like. For a pill-shaped button, set the radius to half of the button's height. For avatars, use a square element and a 50% radius. When combining rounded corners with shadows, remember that the shadow follows the rounded shape, so generous radii create a softer overall silhouette. Test the design at mobile widths as well, because percentage radii can look very different when the element becomes narrow.
Frequently asked questions
Can each corner have two different radii?
Yes. CSS supports elliptical corners with a slash, for example border-radius: 40px / 20px;. This generator keeps each corner circular, but you can edit the copied CSS afterwards.
Why does 50% make a circle?
At 50%, the horizontal radius equals half the element's width and the vertical radius equals half its height. On a square element that produces a circle; on a rectangle it produces an ellipse.
Does border-radius clip images?
It clips the element's background and border, and most browsers also clip child content when overflow: hidden is set. For reliable image cropping, add both the radius and overflow clipping to the image wrapper.