这个工具有问题吗？

关于「CSS Border Radius Generator Online」

该工具通过可视化预览帮助您制作 border-radius 值。使用单独的角控件实现不对称形状，拖动百分比创建有机的水滴形状，或从常见预设（圆角、药丸形、圆形）中选择。

border-radius 为元素提供圆角。除了简单的均匀圆角外，现代设计还使用椭圆半径、每角规格，甚至不对称百分比来创建用于插图和装饰元素的有机形状。

输出适用于任何 CSS 上下文——按钮、卡片、图像、容器。您可以根据样式偏好复制为简写（border-radius: ...）或每个角的全写形式。

如何使用这个工具

如何拼出四角的 border-radius 值

  1. 设置每个角

    「Top-left」「Top-right」「Bottom-right」「Bottom-left」分别接受该角的半径像素值。顺序与 CSS 简写一致：从左上开始顺时针。

  2. 点击运行

    结果只有 `css`：`<tl>px <tr>px <br>px <bl>px`。粘到 `border-radius:` 即可。四个值相同时可缩为一个数，但本工具总是输出完整四值形式。

  3. 非对称小技巧

    不同角形成常见 UI 形状：聊天气泡用一个零角（如 `12 12 12 0`）；标签页用两个底角为 0；胶囊按钮左右取超大值、上下为 0——或者更简单，整体设个超大相等值如 `9999`。

  4. 椭圆半径

    CSS 还支持每角椭圆半径，语法 `tl-x/tl-y`（如 `12px/24px`）实现非对称椭圆。本工具只输出圆形（单值）角——如需椭圆请手改。

相似工具