CSS Border Radius Generator Online

The fields follow CSS shorthand order: top left, top right, bottom right and bottom left. The example 24, 8, 24, 8 pixels produces opposite pairs of larger and smaller corners. Select Generate to inspect the shape. Keeping all four values equal gives a conventional rounded rectangle; differing values can help create a distinctive badge or callout without an image asset.

Pixel values set the radius in CSS pixels, while percentages depend on the element’s width and height. Applying 50 percent to all corners of a square creates a circle, but the same values on a rectangle create an ellipse. The preview has fixed proportions, so percentage output can look different when pasted onto an element with another aspect ratio.

When neighboring radii would overlap, browsers scale them down according to CSS rules. That is why a very large value may appear to stop changing the preview rather than forming an impossible curve. This tool allows nonnegative values up to 500 in the selected unit. It generates one radius per corner and does not offer separate horizontal and vertical radii using slash syntax.

Border radius rounds the element’s background and border, but an overflowing child may still need its own clipping or radius. Use overflow rules intentionally, especially when a card includes menus or shadows that must extend outside it. The downloaded declaration does not add overflow: hidden automatically. Check your component’s images, focus indicators and neighboring content after applying the rounded shape.