CSS Tools
Border Radius Generator
Per-corner and elliptical border-radius with a live preview.
Live preview
Options
Per-corner radii
Top-left
Top-right
Bottom-right
Bottom-left
CSS
border-radius: 30px 30px 30px 30px;
About this tool
Set the four corner radii independently and the tool generates the shorthand. Switch on elliptical mode to set horizontal and vertical radii per corner (perfect for soft, organic blob shapes). Live preview renders against any aspect ratio you choose.
FAQs
What's elliptical border-radius?
Each corner takes two radii separated by '/': border-radius: 50px / 20px makes a wide, shallow curve. With four pairs you can sculpt jelly-bean and blob shapes.
Eight values - what's that syntax?
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px sets horizontal radii (before '/') and vertical radii (after '/') for each corner, starting top-left and going clockwise.
How do I make a perfect circle?
Use border-radius: 50% on a square element. For a pill / capsule shape, use 9999px (larger than any plausible width) on a non-square element.
Will the radius clip child content?
Yes if the parent has overflow: hidden or overflow: clip. Otherwise children paint over the rounded corners. Background images and coloured fills are always clipped to the radius.
Does percentage radius work?
Yes - it's relative to the element's width (horizontal radius) and height (vertical radius). Useful for shapes that scale with the container.