---
title: "CSS Border Radius Generator - Free Online Tool | CanDoYa"
description: "Free CSS border radius generator with live preview, per-corner controls, elliptical slash syntax and copyable CSS. No sign-up."
url: https://candoya.com/tools/css-border-radius-generator/
locale: en
type: browser-tool
---

# Free CSS Border Radius Generator

Category: Color & Design

## What is a CSS border radius generator?

A CSS border radius generator is a visual tool that writes the border-radius property for you. Adjust each corner, switch between pixel and percentage radii, preview circles, pills, cards or blobs, then copy valid shorthand or longhand CSS for your stylesheet.

Border radius looks simple until each corner needs a different curve. This generator keeps the **preview and CSS shorthand in sync**, including the slash syntax for elliptical corners. Use the linked mode for quick cards and pills, or unlink corners to build asymmetric shapes.

Everything runs locally in your browser. No design values are uploaded, and the copied CSS works in modern browsers without a dependency.

## How to use it

1. **Choose a preset** - Start with a soft card, pill, blob or ticket shape to get a useful baseline.
2. **Pick units and size** - Use pixels for fixed component corners or percentages for responsive circles, pills and organic shapes.
3. **Tune each corner** - Keep corners linked for one shared radius, or unlink them and adjust horizontal and vertical radii separately.
4. **Copy the CSS** - Copy the compact border-radius shorthand, or switch to longhand declarations when you need each corner spelled out.

## Who it's for

- **Front-end developers** creating card, button, modal and avatar corners without hand-writing shorthand.
- **UI designers** testing pill buttons, tickets and organic blobs before handing CSS to a team.
- **Design-system maintainers** checking whether a radius token still works across different component sizes.
- **Students learning CSS** who want to see how the one, two, three, four and slash syntaxes map to real corners.

## Expert note

CSS uses the corner order top-left, top-right, bottom-right, bottom-left. When a slash is present, the first group controls horizontal radii and the second group controls vertical radii, which is how elliptical corners and blob-like shapes are made.

## Frequently asked questions

### Is this CSS border radius generator free?

Yes. The generator is free to use with no sign-up, no download and no limit on copied CSS. Adjust the preview, copy the declaration and paste it into your stylesheet.

### Is my design uploaded anywhere?

No. The preview and CSS string are generated entirely in your browser with JavaScript. Your colors, sizes and radius values do not need to leave your device.

### How does border-radius shorthand work?

The shorthand follows the order top-left, top-right, bottom-right, bottom-left. One value applies to every corner, two values pair opposite corners, three values fill the missing bottom-left from top-right, and four values set every corner.

### What does the slash in border-radius mean?

The slash separates horizontal and vertical radii. For example, 50% / 30% makes an elliptical curve because the corner is wider than it is tall. The generator adds the slash only when those two sets differ.

### Should I use px or percent for border radius?

Use px when a component needs a fixed corner, such as an 8px card radius. Use percent when the curve should scale with the element size, such as 50% for circles, pills and flexible blobs.

### Can border radius values be negative?

No. CSS border-radius values must be zero or positive lengths or percentages. The controls clamp values at zero so the generated CSS stays valid.

### Why does 50% make a circle only sometimes?

A 50% radius makes a circle when the element has equal width and height. On a rectangle, 50% makes an oval or pill because percentage radii are based on the box dimensions.

## Related tools

- [CSS Box Shadow Generator](https://candoya.com/tools/css-box-shadow-generator/)
- [CSS Gradient Generator](https://candoya.com/tools/css-gradient-generator/)
- [SVG Pattern Generator](https://candoya.com/tools/svg-pattern-maker/)
- [Color Palette Generator](https://candoya.com/tools/color-palette-generator/)
- [Color Picker](https://candoya.com/tools/color-picker/)

---

*Markdown edition of <https://candoya.com/tools/css-border-radius-generator/>, published for AI agents and other automated readers. Index of key pages: <https://candoya.com/llms.txt>.*