Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Tool Panel
Processed locallyAbout Border Radius Generator
Tune each corner independently or link them into one value, in px or percent. The preview and the copied CSS come from the same numbers, so they cannot drift apart.
- 1
Corners follow the CSS order — top-left, top-right, bottom-right, bottom-left. With linking on you get a single value; unlink and you get four values in that order.
- 2
The percentage ceiling is 50%: once one corner passes half, the two adjacent corners already meet and nothing changes visually, so the slider stops there. Pixels stop at 120.
- 3
Switching units clamps oversized values (120px expressed as a percentage would round the whole box), so a unit switch does not reshape your element.
- 1
Drag a corner
Corners are linked by default and move together; untick the box to tune one corner on its own.
- 2
Pick a unit
Use px for fixed-size cards and % for containers that resize — 50% is the usual circular avatar.
- 3
Copy the CSS
You get one `border-radius` line, ready to paste into a stylesheet.
A corner can only consume half of each adjacent side; past that the browser renders the same shape, so 50% and 100% look identical. The slider stops where the visual stops changing, so you are never dragging with no feedback.
This tool emits the four-corner form, where each corner has the same horizontal and vertical radius. CSS also has the two-part form `border-radius: horizontal / vertical` for elliptical corners, which this tool does not generate — add the second part by hand to the CSS you copy.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools
Design Tools
Cubic Bezier Generator
Drag the control points to shape an easing curve and copy the CSS.
Design Tools