CSS Border Radius Generator
Control each corner individually, try elliptical radii, and copy production-ready CSS instantly.
How to Use the Border Radius Generator
Use Simple mode to quickly round all four corners at once, or switch to Advanced mode to control each corner's horizontal and vertical radius independently for organic, elliptical shapes. Select a unit (px, %, rem) and pick a shape preset to get started instantly.
Use % for Responsive Shapes
Percentage-based border-radius scales with the element size, so a 50% radius always produces a perfect circle or ellipse regardless of dimensions.
50% Makes a Circle
Apply border-radius: 50% to a square element to get a perfect circle. Works great for avatars and icon containers.
Elliptical Radii
The slash syntax (border-radius: Xh Xh / Xv Xv) defines different horizontal and vertical radii per corner, enabling organic blob shapes.
9999px = Pill
A large px value like 9999px guarantees fully rounded ends on any element width, creating the classic pill/capsule button shape.
Frequently Asked Questions
border-radius property rounds the corners of an element's outer border edge. You can specify one to four values for each corner, and optionally a second set of values after a slash for elliptical radii.border-radius: 50%. The 50% value rounds each corner enough to turn a square into a perfect circle.border-radius: top-left top-right bottom-right bottom-left. With the slash syntax for elliptical corners it becomes: border-radius: tl tr br bl / tl-v tr-v br-v bl-v.border-radius: 9999px (or any very large value) to a button. The browser clamps it to half the element's height, producing fully rounded ends regardless of the button's width.