Generate CSS border-radius values visually. Configure individual corner radii to create rounded corners, pill shapes, and organic blob shapes with copy-ready CSS.
The CSS border-radius property rounds the corners of an element's outer border. You can set individual values for each corner to create shapes ranging from simple rounded rectangles to pill shapes, circles, and organic blob shapes. This generator provides visual feedback for precise corner customization.
border-radius: top-left top-right bottom-right bottom-leftBorder-radius accepts 1-4 values: 1 value applies to all corners, 2 values set top-left/bottom-right and top-right/bottom-left, 3 values set top-left, top-right/bottom-left, and bottom-right, 4 values set each corner individually clockwise from top-left. Percentages are relative to the element's dimensions.
| Input | Output |
|---|---|
| All corners: 8px | border-radius: 8px; |
| Top-left: 50px, Top-right: 0, Bottom-right: 50px, Bottom-left: 0 | border-radius: 50px 0 50px 0; |
| All corners: 50% | border-radius: 50%; /* Creates a circle/oval */ |