CSS Border Radius Generator — Visual Builder

Independent Corner Control Without Guessing

Slide each corner from 0 to 150px and watch the preview update instantly. Toggle "Link all corners" to sync all four when symmetry is the goal. Copy semantic CSS: border-radius: 20px 15px 10px 5px; or the shorter form when all corners match. No filler, no generated garbage—just usable output.

The Hidden Superpower: Slash Syntax and Elliptical Corners

border-radius can take eight values, not four. The syntax border-radius: 30px 10px / 10px 30px; has a slash separating horizontal radii from vertical radii, making each corner elliptical instead of a simple quarter-circle. This creates leaf shapes, squircles, and pill-button effects. This tool controls circular corners only; for the slash syntax or complex curves, hand-edit the CSS output or reach for the clip-path generator for path-based shapes.

Pixels vs Percentages: When Each Belongs

This tool emits pixels: border-radius: 20px stays exactly 20px across all screen sizes. CSS also accepts percentages—border-radius: 50% makes a square into a circle, but applies the same percentage to a 200×100 rectangle and you get an ellipse instead. The radius scales with the element's own dimensions. Use pixels for consistent, fixed curves; use percentages when the radius should always be proportional to the box. Most design systems use both depending on context.

Radii Shrink When They Don't Fit—And overflow: hidden Clips Content

Set border-radius: 100px 100px 50px 50px; on a 60px-wide element and the browser scales all radii down so adjacent corners don't overlap—the curve silently shrinks. Also remember: rounded borders clip the visual edge, but content flows to the original rectangle. To clip child elements to the curve, set overflow: hidden on the container. The CSS box-shadow generator pairs well for effects that respect rounded corners.