# How to Generate CSS Border Radius

> Create custom border radius values with a visual editor, including individual corner controls and complex organic shapes.

- URL: https://www.browserutils.dev/how-to/generate-border-radius
- Published: 2026-10-04
- Updated: 2026-07-02

---

## Step 1: Adjust corner values

Use the sliders or input fields to set the border radius for all corners simultaneously with a single value.

## Step 2: Toggle individual corners

Enable individual corner mode to set different radius values for each corner — top-left, top-right, bottom-right, and bottom-left.

## Step 3: Preview the shape

See a live preview of your element updating as you adjust the border radius values. Experiment with asymmetric values for organic shapes.

## Step 4: Copy the CSS

Copy the generated `border-radius` CSS property and paste it into your stylesheet. The shorthand or longhand syntax is provided as needed.

The `border-radius` property seems simple — set a value and corners become round. But the full syntax supports eight values for creating complex organic shapes, and most developers never explore beyond `border-radius: 8px`. The [CSS Border Radius Generator](/tools/css-border-radius-generator) gives you visual controls to create everything from simple rounded corners to blob-like shapes, with the CSS code ready to copy.

## Understanding border radius values

The `border-radius` shorthand accepts one to four values, following the same pattern as margin and padding. One value applies to all corners, two values set top-left/bottom-right and top-right/bottom-left, and four values set each corner individually in clockwise order starting from top-left.

What most developers do not realize is that each corner actually has two radii — horizontal and vertical. The full syntax uses a `/` separator: `border-radius: 50px 30px / 20px 40px` sets horizontal radii of 50px and 30px, and vertical radii of 20px and 40px. This creates elliptical corners rather than circular ones, which is how you produce organic, blob-like shapes.

The familiar `border-radius: 50%` for circles works because 50% of the width and 50% of the height create quarter-ellipses that meet in the middle. On a square element, this produces a circle. On a rectangular element, it produces an ellipse.

## Tips and best practices

- **Use `rem` or `em` units for scalable corners.** Pixel values produce consistent corners regardless of font size, but relative units scale with the design, which is better for responsive layouts.
- **Keep border radius proportional to element size.** A `border-radius: 4px` that looks perfect on a small button looks barely rounded on a large card. Scale the radius with the element.
- **Use the 8-value syntax for unique shapes.** The `/` syntax lets you create organic, asymmetric shapes that feel more natural than standard rounded rectangles. These are popular for decorative elements and image masks.
- **Combine with `overflow: hidden`.** When applying border radius to containers with child elements, add `overflow: hidden` to clip children to the rounded shape. Without it, child content will extend past the curved corners.

## Common issues

- **Border radius not visible.** If your element has no border, background, or box-shadow, the border radius has nothing to round. Add a background color or border to see the effect.
- **Rounded corners clipping content.** On elements with small dimensions and large border radius values, content can be clipped. Ensure your element has enough padding to keep content away from the curved edges.
- **Inconsistent rendering with `border-collapse`.** On tables using `border-collapse: collapse`, border radius is ignored. Use `border-collapse: separate` and apply border radius to the table element.