CSS Border Radius Generator
Free tool No sign-up
About this generator
Design CSS border-radius shapes visually — round individual corners, create blobs, pills, circles and more, then copy the output.
Advertisement
How to use
01
Choose a corner mode
Use "All Corners" to round uniformly, or switch to "Individual" to control each corner's horizontal and vertical radius separately.
02
Drag the sliders
Adjust the radius value for each corner. Toggle between % and px units to suit your layout.
03
Switch shape & background
Preview the radius on a square, wide, or tall box. Change the stage background to check contrast.
04
Try a preset
Pick from Sharp, Pill, Circle, or organic Blob shapes — one click loads the full border-radius value.
05
Combine H & V radii
The slash syntax (e.g. 60% 40% / 30% 70%) lets you set independent horizontal and vertical radii for elliptical corners.
06
Copy the CSS
Hit "Copy CSS" to grab the single-line output and paste it straight into your stylesheet.
CSS border-radius syntax
| Value | Description |
|---|---|
top-left | Rounds the top-left corner. First value in the shorthand. |
top-right | Rounds the top-right corner. Second value in the shorthand. |
bottom-right | Rounds the bottom-right corner. Third value in the shorthand. |
bottom-left | Rounds the bottom-left corner. Fourth value in the shorthand. |
/ h v | Slash separates horizontal from vertical radii for elliptical corners. |
% | Percentage is relative to the element's width (H) or height (V). |
border-radius snippets
Basic
border-radius: 16px;
Four
border-radius: 8px 16px 24px 0px; /* TL TR BR BL */
Ellipse
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
Browser support
border-radius has universal browser support — safe to use anywhere without a fallback or prefix.
Chrome v4+
Firefox v4+
Safari v5+
Edge v12+
IE v9+
See it used in real designs
Browse hand-coded collections that put this tool to work.
Related tools
Advertisement