CSS Border Radius Generator
Shape rounded corners with a live preview. Drag the four corner sliders and pick a unit for a clean border-radius, or switch to blob mode for organic shapes, then copy the CSS.
How to generate border-radius CSS
- Set each corner radius with the sliders, or link them to round all four together.
- Choose a unit (px, % or rem), or switch to blob mode and randomize an organic shape.
- Check the live preview, then copy the border-radius code into your stylesheet.
Examples
Equal corners collapse to one value
topLeft 10, topRight 10, bottomRight 10, bottomLeft 10, unit px
border-radius: 10px;
Symmetric diagonals collapse to two values
topLeft 10, topRight 20, bottomRight 10, bottomLeft 20, unit px
border-radius: 10px 20px;
Organic blob shape
blob: horizontal 30 70 70 30, vertical 30 30 70 70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Frequently asked questions
How does the corner order map to the CSS shorthand?
CSS reads border-radius as top-left, top-right, bottom-right, bottom-left, going clockwise from the top-left. The tool collapses the values to the shortest form: one value when all corners match, two when the diagonals match, otherwise three or four explicit values.
Why does the output sometimes show fewer than four values?
border-radius has built-in shorthand. A single value rounds all corners, two values set the two diagonals (top-left/bottom-right and top-right/bottom-left), and three values fill in the missing bottom-left from the top-right. The shorter output is equivalent to writing all four.
What is blob mode and the slash in the output?
Blob mode uses the full eight-value border-radius syntax, written as four horizontal radii, a slash, then four vertical radii. Giving each corner a different horizontal and vertical radius bends the edges into smooth, organic blob shapes instead of simple round corners.
When should I use px, percent or rem?
Use px for a fixed corner size, percent to scale the radius with the element (50% on a square makes a circle), and rem to tie the radius to your root font size so it scales with the user's text settings.
Why can I not enter a negative radius?
CSS border-radius does not accept negative lengths; a corner radius is always zero or greater. The tool blocks negative values so the generated code is always valid CSS.
Is my design sent to a server?
No. The preview and the generated border-radius code are computed entirely in your browser, so nothing about your shape or settings leaves your device.
Related tools
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
CSS Clamp Generator
Generate a responsive CSS clamp() value for fluid font sizes and spacing. Set min and max sizes plus viewport bounds and copy the result.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.