Create rounded corners visually with a live preview. Adjust each corner individually or link all corners. Choose pixel or percentage values. Customize box size, background, and border colors -- then copy the CSS code.
See your border radius update in real time as you drag the sliders. The preview box shows exactly how the rounded corners will look, letting you fine-tune visually.
Toggle between linked mode (all corners the same) and unlinked mode (each corner independent). Create uniform rounding or unique asymmetric shapes.
Switch between pixel and percentage values. Percentages are great for responsive design since the radius scales with the element's dimensions.
Choose from built-in presets like Circle, Pill, Rounded, and creative shapes. Copy the shorthand or longhand CSS with one click.
The CSS border-radius property defines the radius of an element's corners, creating rounded corners. It is one of the most commonly used CSS properties for creating modern, polished UI designs. From subtle corner rounding on cards to creating circles and pill-shaped buttons, border-radius is essential for contemporary web design.
The border-radius shorthand accepts 1 to 4 values: border-radius: top-left top-right bottom-right bottom-left. With 1 value, all corners are the same. With 2 values, the first applies to top-left/bottom-right and the second to top-right/bottom-left. With 3 values, the first is top-left, the second is top-right/bottom-left, and the third is bottom-right.
Pixel values create a fixed radius. A 10px radius always rounds the corner by exactly 10 pixels regardless of the element's size. Percentage values are relative to the element's width and height. Setting border-radius: 50% on a square element creates a perfect circle. Percentages are ideal for responsive designs.
border-radius property rounds the corners of an element's outer border edge. You can set all four corners to the same value or specify different values for each corner (top-left, top-right, bottom-right, bottom-left).
border-radius: 50% on a square element (equal width and height). For example: width: 200px; height: 200px; border-radius: 50%;. If the element is not square, 50% creates an ellipse.
border-radius: 10px 20px 30px 40px (top-left, top-right, bottom-right, bottom-left). Or use longhand properties like border-top-left-radius for individual control. Click "Unlink" in our tool to adjust corners independently.
Check out our other free CSS tools. Generate box shadows, gradients, flexbox layouts, and more -- all from your browser with no sign-up required.
Box Shadow Generator →