# CSS Border Radius Generator

> Visually design CSS border-radius values. Independent corner control, preset shapes, live preview, and copyable CSS. Includes the "organic" 8-value syntax.

URL: https://uttir.com/css-border-radius-generator
Categories: web-tools, color-tools, developer-tools
Privacy: Border-radius values are computed in your browser. No upload, no tracking.

## About

Design CSS border-radius visually. Independent control of all 4 corners (or all 8 values for organic shapes). Live preview on a square, circle, or custom rectangle. The generated CSS is copy-paste ready.

Common uses: rounded buttons, card corners, organic shapes for hero sections, blob backgrounds, image masks. The 8-value syntax (e.g. "30% 70% 20% 40% / 50% 60% 40% 30%") gives you asymmetric organic shapes that look more natural than uniform corners.

## How to use

1. **Pick a shape preset** — Square, rounded, circle, pill, or one of the organic shapes.
2. **Adjust the corners** — Drag the corner handles or use the input fields. The CSS updates live.
3. **Copy the CSS** — Use the "Copy" button to grab the generated border-radius value.

## FAQ

### What is the 8-value border-radius syntax?

The standard border-radius accepts 4 values (one per corner). The advanced syntax accepts 8 values: 4 horizontal radii and 4 vertical radii, separated by a slash. This lets you create asymmetric organic shapes — for example, "30% 70% 20% 40% / 50% 60% 40% 30%" creates a leaf-like shape.

### What is the difference between px and %?

Pixels are absolute — a 20px border-radius is always 20 pixels. Percentages are relative to the element size — 50% makes a circle from a square, 25% is a soft rounded corner. Percentages are more flexible for responsive designs.

### How do I create a perfect circle?

Set all 4 corners to 50%. This works for any element with equal width and height. For a pill shape (rounded ends on a rectangle), set all corners to 50% on a rectangle that is wider than it is tall.

### Why does my shape look different in the browser?

CSS border-radius is rendered correctly by every modern browser. If your shape looks different, check the dimensions of the element — percentages are relative to the element size, not a fixed value.

## Related tools

- [CSS Box Shadow Generator](https://uttir.com/css-box-shadow-generator) — Visually design CSS box-shadows. Adjust offset, blur, spread, color, and inset. Stack multiple shadows for layered effects. Get the generated CSS instantly.
- [CSS Gradient Generator](https://uttir.com/css-gradient-generator) — Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.
- [CSS Flexbox Playground](https://uttir.com/css-flexbox-playground) — Visual playground for CSS Flexbox. Adjust container and item properties with sliders, see the live layout update, and copy the generated CSS.
- [CSS Minifier](https://uttir.com/css-minifier) — Shrink CSS by stripping comments, collapsing whitespace, and tightening punctuation. See byte savings live.

---

For the full HTML page with the live tool, visit https://uttir.com/css-border-radius-generator.
This file is the markdown rendering at https://uttir.com/css-border-radius-generator.md. See https://uttir.com/llms.txt for a site-wide summary.