Border Radius Generator
Set the rounding of a box corner by corner, or all four at once, and copy the border-radius rule. The preview is a live box with the same radii, so you can judge the shape before it goes into your stylesheet.
Each corner is set in pixels. The generator writes the shortest valid form: a single value when all corners match, and the four-value shorthand when they differ. Everything runs in the browser.
border-radius: 16px;How to use it
- Keep Uniform on to change all four corners together, or turn it off to set each corner.
- Drag the sliders to set the radius in pixels. Zero gives a square corner.
- Check the preview box. A radius of half the box size gives a circle or pill.
- Copy the border-radius declaration into your component.
About the CSS behind it
The border-radius property rounds the corners of an element's border box. It takes one to four lengths or percentages and is defined in the W3C CSS Backgrounds and Borders Module Level 3. The four-value shorthand runs clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left.
When a radius is larger than half of the box width or height, the browser scales all radii down by the same factor so the sides still meet. That scaling is why a very large value gives a clean pill or circle rather than a broken shape.
Use the same radius on related elements, such as an input and its button, so the shapes line up. Use a consistent scale, for example 4, 8 and 16 pixels, across a design system so cards, inputs and badges feel like one family.
Frequently asked questions
- What is the order of the four border-radius values?
- Top-left, top-right, bottom-right, bottom-left, clockwise from the top-left corner. If you give only two values, the first applies to top-left and bottom-right and the second to top-right and bottom-left.
- How do I make a perfect circle or a pill shape?
- For a circle, make the element square and use border-radius: 50%. For a pill, use a radius at least half the height of the element, or a large value such as 9999px, which is clamped to half the box size by the browser.
- Can border-radius use percentages?
- Yes. Percentages are relative to the box width for horizontal radii and to the box height for vertical radii. The generator outputs pixels, which are easier to reason about for fixed-size components.
- Does a large radius hide content?
- It can. Content that sits in a rounded corner is not clipped unless you set overflow: hidden on the element. Add it on cards and images that should keep their corners.