CSS 圆角生成器 - border-radius 可视化 · 52tool.net

CSS圆角生成器

单位

联动所有圆角

左上 (top-left) 10

右上 (top-right) 10

右下 (bottom-right) 10

左下 (bottom-left) 10

快速设置

预览

生成的 CSS 代码

border-radius: 10px;

预设形状

圆形

药丸

叶子

水滴

水滴

不规则

半圆

拱形

微圆

斑点

📘 使用说明

分别调整 4 个角的水平 / 垂直半径
可切换百分比 / px 单位
底部输出符合 CSS Level 3 的 border-radius 简写

❓ 常见问题

Q: 如何画半圆 / 胶囊？

A: 宽高比 2:1，圆角设 50% 即为胶囊；正方形设 50% 为圆形。工具有「胶囊」预设。

Q: border-radius 简写四个值顺序？

A: 顺时针：左上 / 右上 / 右下 / 左下。工具自动按此顺序输出。

👉 下一步 🏆 看看周榜热门 🧩 工作流中心 🔍 全部工具分类