Skip to content

CSS Border Radius Generator

Visually design rounded corners for any element. Control each corner independently, switch units, and copy the CSS instantly.

Unit
Corners
Top Left
px
Top Right
px
Bottom Left
px
Bottom Right
px
Presets:

How to Use the Border Radius Generator

Design rounded corners in seconds without writing CSS manually. The tool gives you individual control over all four corners with live preview.

  1. Choose a unit: px for fixed sizes, % for responsive or circular shapes.
  2. Use "Link All Corners" to set all four corners to the same value at once.
  3. Adjust each corner individually for asymmetric designs.
  4. Use presets for quick standard values (Square, Pill, Circle).
  5. Click "Copy CSS" to get the ready-to-paste border-radius code.

Frequently Asked Questions

CSS border-radius rounds the corners of an element. You can set a single value for all corners, or up to four values for each corner individually. Values can be in px, %, em, or rem units. It applies to the border box, meaning borders and backgrounds are both rounded.
Apply border-radius: 50% to an element with equal width and height. For example: width: 100px; height: 100px; border-radius: 50% creates a perfect circle. If the dimensions are unequal, you get an ellipse instead.
Instead of shorthand, you can use: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. These longhand properties accept a single value, or two values (horizontal / vertical radii) for elliptical corners.
With 4 values: border-radius: TL TR BR BL — top-left, top-right, bottom-right, bottom-left (clockwise from top-left). With 2 values: TL+BR, TR+BL. With 1 value: all corners equal. The shorthand outputs optimized code by combining identical values.
Yes! border-radius is animatable with CSS transitions and animations. Example: transition: border-radius 0.3s ease. You can smoothly animate from square to circle and back. Useful for hover effects and button state changes.