← All tools
// CSS / Design

Border Radius Generator online

Generate CSS border-radius with live preview - all four corners

CSS Border Radius Generator logo
by
CHUNKY
MUNSTER
// CSS

Designing Shapes with the Border Radius Generator

  1. Drag the sliders for each corner (top-left, top-right, bottom-right, bottom-left) or type values directly.
  2. Toggle between the shorthand (equal corners) and the per-corner (individual) mode.
  3. The live preview updates in real time - see the shape change as you adjust.
  4. Click Copy CSS to get the ready-to-paste border-radius declaration.

CSS Border Radius Generator provides a visual interface for creating custom rounded corners and complex shapes for your web project. This free online border radius tool outputs precise code that works across all modern browsers, allowing you to transform standard rectangles into a pill shape generator result or a perfect circle in seconds. By using the four independent corner controls, you can craft unique UI elements with asymmetrical curves.

CSS border-radius Syntax and Elliptical Curves

The standard border-radius property controls the curvature of element corners. This tool generates the cleanest possible CSS shorthand: border-radius: 8px for uniform corners, or the expanded four-value form for individual control. For advanced designs, you can create elliptical border radius effects using the slash syntax (e.g., 50px / 20px), which sets different radii on the x and y axes. This css corner radius tool handles the math so your code remains valid and performant.

Frequently Asked Questions

How do I make a perfect circle with CSS?

Set border-radius: 50% on an element where width equals height. The percentage is relative to the element's dimensions, so 50% makes each corner radius half the width/height - forming a circle.

What is an elliptical border-radius?

The slash syntax (border-radius: 100px / 50px) sets different radii on the x and y axes - creating an oval/elliptical corner shape instead of a circular arc.

What units can I use for border-radius?

Any CSS length unit: px, em, rem, %, vw/vh. Percentages are relative to the element's width (for horizontal radius) and height (for vertical radius).

Can border-radius affect click/hover areas?

No. border-radius clips the visual rendering but the element's clickable area remains a rectangle. To clip the interactive area, use CSS clip-path or adjust the element shape at the DOM level.

Whether you're building a sleek card UI or a decorative circular profile frame, this CSS border radius generator gives you instant, accurate results. For more layout and styling options, see also the Box Shadow Generator and CSS Gradient Generator. Bookmark this free online border radius tool for the next time you need to fine-tune your web element geometry.

// deep diveRead the guide →