Live Border-Radius Previewer

Stop guessing your `border-radius` values. Use our interactive tool to craft the perfect rounded corners and complex shapes, with instant visual feedback and code generation.

Border-Radius Previewer

border-radius: 25px 25px 25px 25px;

Mastering the `border-radius` Property

The `border-radius` property is a fundamental CSS tool for softening the sharp corners of an element, a cornerstone of modern web design. It can take one, two, three, or four values to control the curvature of the corners. Our tool simplifies this by letting you manipulate the corners visually.

Heres how the syntax works:

  • One value: border-radius: 15px; - Applies a 15px radius to all four corners.
  • Two values: border-radius: 20px 5px; - The first value (20px) applies to the top-left and bottom-right corners. The second value (5px) applies to the top-right and bottom-left.
  • Three values: border-radius: 20px 5px 10px; - The first value (20px) is for the top-left. The second (5px) is for the top-right and bottom-left. The third (10px) is for the bottom-right.
  • Four values: border-radius: 15px 50px 30px 5px; - Applies to top-left, top-right, bottom-right, and bottom-left corners, in that order (clockwise from top-left).

Our generator produces the four-value syntax for maximum clarity and control, but the browser will intelligently shorten it if the values are symmetrical (e.g., `15px 15px 15px 15px` becomes `15px`).

Creating Complex Shapes

`border-radius` is not just for slightly rounded rectangles. You can create a variety of shapes by pushing its values to the limit.

  • Circles: To create a perfect circle from a square element, set the border-radius to 50%.
  • Pill Shapes: To create a pill or capsule shape from a rectangle, set the border-radius to a very large value, like 9999px. This will ensure the ends are perfectly semicircular regardless of the element's height.
  • Organic "Blob" Shapes: By using the more complex slash (`/`) syntax, you can define both the horizontal and vertical radii for each corner, leading to organic, blob-like forms. For example: `border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;`. While our tool doesn't generate this syntax directly, understanding the four-value system is the first step to experimenting with these advanced forms.

Frequently Asked Questions (FAQ)

What units can I use for border-radius?

You can use various CSS units, but pixels (`px`) and percentages (`%`) are the most common. Pixels provide a fixed curve, while percentages are relative to the element's size, which is useful for creating responsive shapes like circles (50%). Our tool uses `px` for simplicity and direct control.

Why do my corners look weird on a very narrow element?

The browser cannot render a radius larger than the element's dimension in that axis. If you have a box that is 20px tall and you apply a `border-radius` of 40px, the final rendered radius will be clamped to half the height (10px on top, 10px on bottom) to prevent the curves from overlapping in a strange way.

How does `border-radius` interact with borders?

It works perfectly! The `border-radius` property will curve the element's background, content, and its border, all at the same time, creating a smooth, continuous rounded border.