SmartKitio

CSS Border Radius Generator

Round each corner of an element separately and copy the matching border-radius CSS.

Your input stays in your browser. Nothing is uploaded.

About this tool

The output lists the four corners in CSS order: top-left, top-right, bottom-right, bottom-left. Values are in pixels. If the radii of two adjacent corners add up to more than the side length, the browser scales them down proportionally, so a very large value on a small box produces a pill or circle shape rather than an error.

How to use it

  1. Set the radius for each corner.
  2. Check the preview.
  3. Copy the CSS.

Examples

  • Speech bubble

    16px 16px 16px 0px keeps the bottom-left corner square.

  • Pill button

    A radius of 999px on every corner produces fully rounded ends.

FAQ

How do I make a circle?
Use a square element and border-radius: 50%.
Can I use percentages or elliptical corners?
Not in the controls. Edit the copied CSS, for example border-radius: 50% / 20%.
Is anything uploaded?
No.