CSS Border Radius Generator
Create custom border radius values visually. Adjust corners individually or together, use presets, and copy CSS or Tailwind code.
Settings
Corner Radius
px
px
px
px
Presets
Live Preview
TL: 16px
TR: 16px
BL: 16px
BR: 16px
Tailwind Rounded Classes
CSS Border Radius Tips
Single Value
border-radius: 10px applies the same radius to all corners.
Two Values
border-radius: 10px 20px sets top-left/bottom-right and top-right/bottom-left.
Four Values
border-radius: 10px 20px 30px 40px sets each corner clockwise from top-left.
Elliptical Corners
Use / to separate horizontal and vertical radii for elliptical shapes.
Perfect Circle
Use border-radius: 50% on a square element to create a perfect circle.
Pill Shape
Use a very large value like 9999px to create pill-shaped buttons.