Border-Radius Generator
Shape every corner — from subtle rounding to pills and organic blobs — with a live preview and copy-ready CSS.
Corners
Preview
CSS
Tailwind class
Presets
Common shapes to start from.
Border-Radius Guide
How the shorthand works and when to use each unit.
Corner Order
top-left top-right bottom-right bottom-leftValues go clockwise from the top-left. Two values mean "top-left & bottom-right", then "top-right & bottom-left".
Elliptical Corners
40px 10px / 20px 60pxValues before the slash set each corner's horizontal radius; values after set the vertical radius.
px vs %
16px · 50%px keeps corners the same size on any box. % is relative to the box's width (horizontal) and height (vertical).
Pills & Circles
9999px · 50%A huge px value makes a pill on any rectangle. 50% makes a circle on a square and an ellipse on a rectangle.
Overlapping Radii
auto-scaledIf two corners on one side add up to more than the side, browsers scale all radii down evenly so they fit.
Nested Corners
inner = outer − paddingFor a rounded element inside another, subtract the padding from the outer radius so the curves stay parallel.
Why CornerKit?
CornerKit is a fast, lightweight corner designer for web designers and developers — dial in every corner visually instead of trial and error in the browser's dev tools.
All processing happens entirely in your browser. Nothing leaves your device.