CSS Border Radius生成器

以可视化方式创建复杂的CSS border-radius值。可独立控制每个圆角。

TL: 20pxTR: 20pxBR: 20pxBL: 20px

border-radius: 20px 20px 20px 20px;

如何使用本工具

1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
2
Watch the indigo preview box update live as you change each corner.
3
Read the generated border-radius declaration in the code box below the sliders.
4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.

CSS的border-radius属性最多接受四个值，每个圆角一个，顺序为左上、右上、右下、左下。组合不同的圆角半径可创造出有机的水滴形状、不对称卡片或对话气泡样式。本工具让你通过滑块调整每个圆角，并实时查看结果。

Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.

椭圆形圆角呢？▼

border-radius还支持每个圆角用/分隔的两个值，从而创建椭圆而非圆形。对于基础用途，每个圆角用单个值就足够了。