Round each corner with live sliders and copy the border-radius CSS.
Generated locally in your browser.
How do you generate CSS border-radius?
When all four corners match, the output is a single value; otherwise it lists top-left, top-right, bottom-right and bottom-left in order. Pixel values give a fixed corner regardless of size, while percentage values scale with the element. Setting every corner to 24px outputs border-radius: 24px, and a 50% radius on a square makes a perfect circle. Adjust each corner and copy the code.
Understanding your result
Pixel values give a fixed corner regardless of size; percentage values scale with the element, so 50% always produces an ellipse or circle.
Formula and method
When all four corners match, the output is a single value; otherwise it lists top-left, top-right, bottom-right and bottom-left in order.
Assumptions and limitations
The tool generates a border-radius declaration from your corner values with a live preview. It produces the shorthand for the four corners but does not set separate horizontal and vertical radii per corner for elliptical shapes, nor does it style borders, shadows, or the element's size — you apply the copied CSS yourself.
Worked example
Setting every corner to 24px outputs “border-radius: 24px;”. A 50% radius on a square makes a perfect circle.
How to use this tool
- Set the radius for each corner.
- Switch between pixels and percent.
- Copy the generated border-radius rule.
Common mistakes to avoid
- Using a percent radius and expecting a fixed corner — percent scales with the box.
About the CSS Border Radius Generator
Round the corners of any element and copy the border-radius CSS. Adjust all four corners independently and watch the live preview.
Who should use this tool
Front-end developers and designers rounding the corners of buttons, cards, avatars, or images who want to dial in each corner visually and copy exact CSS. Useful for creating pill shapes, circles, or asymmetric corners without repeatedly guessing values and refreshing the browser.
Benefits
- Rounds all four corners independently with live sliders
- Copies clean border-radius shorthand ready to paste
- Preview updates instantly as you drag each value
- Generates the CSS entirely in your browser
Practical use cases
- Rounding a button into a soft pill shape
- Turning a square avatar into a circle
- Giving a card gently rounded corners
- Creating asymmetric corners for a custom shape
Explore all Developer Tools tools
Frequently asked questions
How do I make a circle?
Use a square element and set every corner to 50%.
Can corners differ?
Yes. Set each corner separately and the tool outputs the four-value shorthand.
How do I turn a square element into a circle with border-radius?
Set the border-radius to 50% on an element that is equally wide and tall. The percentage scales with the element's size, so 50% always rounds every corner into a perfect circle. On a rectangle the same value produces an ellipse rather than a circle.
What is the difference between pixel and percentage border-radius?
A pixel value gives a fixed corner curve that stays the same regardless of the element's size. A percentage is relative to the element's dimensions, so the curve scales as the element grows or shrinks. That is why 50% reliably produces a circle while a fixed pixel value does not.