CSS Border Radius Generator — Free Online Tool
Generate CSS border-radius values online for free. Set individual corner radii visually for circles, pills, and custom rounded shapes. Copy CSS instantly.
About CSS Border Radius Generator
Border-radius CSS creates rounded corners and shapes for HTML elements. Our visual border-radius generator lets you control each corner independently or set all corners simultaneously. The generator supports simple equal-radius rounding, asymmetric custom shapes, and fully circular elements. For advanced designs, each corner supports elliptical radii. A live preview shows your element shape in real time and the complete CSS border-radius property is generated for you to copy.
Frequently Asked Questions
Can I set different radius values for each corner?
Yes — each of the four corners can be set independently for asymmetric designs.
How do I make a perfect circle?
Set border-radius to 50% on a square element to create a perfect circle.
How do I make a pill shape?
Set border-radius to 9999px for a full pill regardless of element width.
What are elliptical border radii?
Each corner can have independent horizontal and vertical radii using the slash syntax.
Does border-radius affect the shadow?
Yes — CSS box-shadow follows the element's border-radius, creating rounded shadows on rounded elements.