Developer Tools边框圆角生成器
通过独立角落控制，可视化创建复杂的 CSS border-radius 形状。实时预览并一键复制可用的 CSS 代码。
角落设置
单位:
预览与 CSS 代码
border-radius: 8px
简写
.element {
border-radius: 8px;
}完整写法
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}相关工具
关于边框圆角生成器
使用方法
- 使用滑块或数字输入框调整每个角
- 开启'链接所有角落'可同时控制四个角
- 根据需要选择单位（px 或 %）
- 使用预设快速应用常见形状，如圆形、胶囊或正方形
- 自定义预览背景和元素颜色以获得真实效果
- 一键复制生成的 CSS 简写或完整代码
常见使用场景
- 设计具有圆角的按钮、卡片和输入框
- 在 UI 设计中创建胶囊形标签和徽章
- 使用 50% border-radius 构建圆形头像和图标
- 为创意布局生成独特的不对称形状
- 精确控制角落进行 UI 组件原型设计
- 学习和实验 CSS border-radius 值
常见问题
什么是 CSS border-radius？
CSS border-radius 是一个用于圆化元素边框盒角落的属性。它接受一到四个值，分别定义左上、右上、右下和左下角的半径。
如何使用边框圆角生成器？
使用滑块或数字输入框独立调整每个角。实时预览会立即更新，您可以一键复制生成的 CSS 代码。
我可以为每个角设置不同的值吗？
可以。关闭'链接所有角落'选项，即可独立控制每个角（左上、右上、右下、左下），创建不对称形状。
CSS 简写和完整写法有什么区别？
简写属性 border-radius 一次性设置所有四个角。完整属性（border-top-left-radius 等）单独设置每个角，便于覆盖特定角落。
如何用 CSS border-radius 制作圆形？
在正方形元素上将 border-radius 设为 50%。使用本工具的'圆形'预设即可立即应用并在实时预览中查看效果。
如何制作胶囊/药片形状？
将 border-radius 设为非常大的值（如 9999px）即可创建胶囊形状。使用'胶囊'预设一键应用。
border-radius 支持百分比值吗？
支持。百分比值相对于元素的尺寸：50% 在正方形元素上会创建圆形。本工具同时支持像素（px）和百分比（%）单位。
border-radius 两值简写代表什么？
两值简写中，第一个值应用于左上和右下角，第二个值应用于右上和左下角。
生成的 CSS 与所有浏览器兼容吗？
是的。border-radius 属性在所有现代浏览器和 Internet Explorer 9+ 中均受支持。
我可以用背景色预览形状吗？
可以。实时预览会用可自定义的背景色显示形状，让您准确了解圆角效果。
如何重置为默认值？
点击'重置'按钮，将所有角恢复为 8px，这是大多数 UI 框架使用的默认圆角值。
有哪些可用预设？
本工具包含常见形状的预设：正方形（0px）、轻微（4px）、圆角（8px）、超级圆角（16px）、胶囊（9999px）和圆形（50%）。