CSS Border Radius Generator — Visual Rounded Corners

CSS Border Radius Generator — Design Rounded Corners Visually

Create the perfect border-radius with a visual editor. Adjust each corner independently or link them all together, switch between pixels and percentages, watch the live preview, and copy the ready-to-use CSS. No more trial and error.

Features

• Independent corners: set top-left, top-right, bottom-right, and bottom-left separately
• Link mode: change all four corners at once with a single slider
• px or %: switch units — percentages create smooth elliptical curves
• Live preview: see the shape update instantly on a sample element
• Clean CSS output: copy a single property ready to paste

Understanding border-radius

The border-radius shorthand takes up to four values, applied clockwise starting from the top-left corner: top-left top-right bottom-right bottom-left. A value of 0 means a sharp corner; higher values produce rounder corners.

px vs % — what’s the difference?

• Pixels (px): a fixed radius regardless of element size — predictable and consistent
• Percent (%): relative to the element’s dimensions. Setting all corners to 50% on a square turns it into a perfect circle

Common shapes

• Rounded card: 8–16px on all corners
• Pill / button: a large px value like 999px
• Circle: 50% on all corners (on a square element)
• Speech bubble: round three corners, leave one sharp

Privacy

This tool runs entirely in your browser. Nothing is uploaded or stored.