Border Radius Generator
Create CSS border-radius with a visual corner editor.
border-radius: 12px;
How to Use the Border Radius Generator
Adjust the four corner sliders to set the border-radius for each corner independently, or keep them linked so all corners move together. Switch between px and % units, try the built-in preset shapes, then click "Copy CSS" to grab the generated code.
Frequently Asked Questions
What is CSS border-radius?
The CSS border-radius property rounds the corners of an element. You can set a single value for all four corners or control each corner individually.
What is the difference between px and % for border-radius?
Pixel values (px) give a fixed rounding size. Percentage values (%) are relative to the element's width and height — 50% on a square creates a perfect circle.
How do I make a perfect circle with CSS?
Set border-radius to 50% on an element that has equal width and height. Use the "Circle" preset in this tool to see it in action.
Can I set different radii for each corner?
Yes. CSS border-radius accepts four values in the order: top-left, top-right, bottom-right, bottom-left. Click the "Unlinked" button in this tool to edit each corner independently.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur.
Open tool →