Border Radius Previewer
Create rounded corners with instant CSS code generation and live preview
Live Preview
See changes instantly as you adjust values
Corner Control
Adjust each corner individually or all at once
Preset Shapes
One-click pill, sharp, and rounded styles
Copy Ready
CSS code ready to paste into your project
Corner Radius Control
10px
10px
10px
10px
Preset Shapes
Live Preview
CSS Code
Border Radius Guide
Individual Corners
Control each corner separately:
- Top Left (TL): First corner, top-left position
- Top Right (TR): Second corner, top-right position
- Bottom Right (BR): Third corner, bottom-right position
- Bottom Left (BL): Fourth corner, bottom-left position
CSS Values
How it translates to CSS:
border-radius: TL TR BR BL;
Units: px (pixels), % (percentage), em, rem
Common Use Cases
Styled Buttons
Create pill-shaped buttons with 50% radius
Image Frames
Add rounded borders to images and avatars
Card Layouts
Soften edges on card and panel elements
Circular Elements
Create perfect circles with 50% on squares
Best Practices
- Try Percentages: Use 50% for circles on square elements
- Be Consistent: Match corner radius across related elements
- Accessibility: Ensure sufficient contrast with rounded backgrounds
- Performance: No performance impact even with large radius values
- Test Browsers: Works in all modern browsers, IE 9+
- Combine Effects: Works with shadows, borders, and gradients
- Responsive: Use em/rem units for scalable designs
- Transitions: Can animate border-radius smoothly
Keyboard Shortcuts
Ctrl + Shift + C Copy CSS
Click Preset to apply instantly
Use ← → to fine-tune values