Border Radius
Fine-tune border radius for each corner with visual drag handles.
Free & unlimited
Shape presets
16px · 16px · 16px · 16px
px
px
px
px
Tip: Drag the corner handles on the preview to adjust radius visually. Use % units for perfect circles (50% on a square). Toggle Longhand to get individual corner properties.
border-radius: 16px;
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Pick a corner
Click any of the four corners to adjust its border-radius independently.
- 2
Drag the sliders
Use the sliders or type exact pixel values to set horizontal and vertical radii for each corner.
- 3
Preview the shape
Watch the live preview update as you tweak values, showing the exact shape your element will have.
- 4
Copy the CSS
Click the copy button to grab the generated border-radius shorthand or longhand CSS.
- Use 50% on all corners to create a perfect circle from a square element.
- You can set different horizontal and vertical radii per corner (e.g., 20px 40px) to create organic blob shapes.
- The shorthand order is top-left, top-right, bottom-right, bottom-left - clockwise from the top-left.
- Large border-radius values on rectangular elements create pill-shaped buttons.
- Independent control for all four corners
- Horizontal and vertical radius per corner
- Live shape preview
- One-click CSS copy
- Visual drag handles for intuitive editing
- Design rounded cards and containers with asymmetric corners.
- Create organic blob shapes for decorative background elements.
- Build pill-shaped buttons and input fields.
- Prototype unique UI shapes without trial and error in a code editor.
Shorthand like "border-radius: 10px 20px 30px 40px" sets all four corners in one line (clockwise). Longhand uses separate properties like border-top-left-radius for each corner.
Yes. Percentages are relative to the element's dimensions. 50% creates a circle from a square, while on a rectangle it creates an ellipse.
Percentage-based radii are calculated relative to width and height independently, so 50% on a rectangle creates an elliptical curve, not a circular one.