Border radius controls the roundness of element corners. Different radius values create different design feels: from sharp and professional to soft and friendly.
Adjust each corner independently using the sliders. The preview updates in real time. Copy the CSS code for your project.
Frequently Asked Questions
Q: Can I set different radii for each corner?
Can I set different radii for each corner? Yes, use the format: border-radius: top-left top-right bottom-right bottom-left.
Q: What is the best border radius for a card?
What is the best border radius for a card? 12-16px is the sweet spot for cards in most modern designs.
Q: What border radius values should I use for different elements?
What border radius values should I use for different elements? Cards typically use 8-16px, buttons 4-8px, modals 12-20px, and avatars 50% for circles. Use larger values on bigger elements for proportional consistency.
Q: How do I create a pill-shaped button?
How do I create a pill-shaped button? Set the border-radius to a very large value like 999px. The browser will cap it at half the element height, automatically creating a pill shape regardless of button size.
Q: Can I apply different radii to each corner?
Can I apply different radii to each corner? Yes, the four individual corner controls let you set unique values for top-left, top-right, bottom-right, and bottom-left. This is useful for directional design elements.