🔘 CSS Border Radius Generator

Shape a card, button or image frame with four independent corner radii, preview the result and copy the compact CSS shorthand. Switch between pixels and percentages, link corners while you explore, and start from practical presets.

Presets:
Live corner preview
CSS shorthand order

Four values are written clockwise: top-left top-right bottom-right bottom-left. A percentage radius is relative to the element’s own size, which makes 50% useful for circles and responsive rounded shapes.