免费 CSS border-radius 生成器
全程在浏览器中运行，无需上传，无需注册。
Presets
Top right
Bottom right
Bottom left
Preview
CSS code
The slash appears only when horizontal and vertical radii differ.
免费 CSS border-radius 生成器
全程在浏览器中运行，无需上传，无需注册。 全程在浏览器中运行。无需上传，无需注册，完全免费。
使用方法
- 1Choose a preset. Start with a soft card, pill, blob or ticket shape to get a useful baseline.
- 2Pick units and size. Use pixels for fixed component corners or percentages for responsive circles, pills and organic shapes.
- 3Tune each corner. Keep corners linked for one shared radius, or unlink them and adjust horizontal and vertical radii separately.
- 4Copy the CSS. Copy the compact border-radius shorthand, or switch to longhand declarations when you need each corner spelled out.
适用人群
- 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.
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.
常见问题
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.