Border Radius Generator
Create custom rounded corners with visual preview.
Preview
Border Radius
px
px
px
px
Presets
Generated CSS
border-radius: 16px;Tailwind CSS:
rounded-[16px]About Border Radius
The CSS border-radius property allows you to create rounded corners on elements. You can specify different radii for each corner to create unique shapes.
Syntax
border-radius: 10px;- All corners equalborder-radius: 10px 20px;- Top-left/bottom-right and top-right/bottom-leftborder-radius: 10px 20px 30px 40px;- Each corner individually (TL, TR, BR, BL)
Common Values
- Pill shape: Use a very large value like 9999px
- Circle: Set border-radius to 50% on a square element
- Subtle rounding: 4-8px for a modern look