Elysia Tools
导航
Design
生成 CSS 圆角属性
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 圆角生成器是一款高效的在线工具，旨在帮助开发者和设计师快速生成精确的 border-radius CSS 代码，通过可视化调节四个角的圆角半径，轻松实现现代化的 UI 界面设计。
背景
正在开发一个产品展示页面，需要为所有卡片添加统一的圆角效果以保持视觉一致性。
问题
手动编写 border-radius 代码容易出错，且难以直观预览效果。
如何使用
勾选“统一圆角”，将滑块调整至 12px，直接复制生成的 CSS 代码。
uniform: true, topLeft: 12, topRight: 12, bottomRight: 12, bottomLeft: 12结果
快速获得 border-radius: 12px; 代码，确保了页面卡片样式的统一与美观。
背景
为了突出页面的交互元素，需要设计一个左上角和右下角为圆角，其余为直角的特殊按钮。
问题
需要精确控制四个角的半径，手动计算代码效率较低。
如何使用
取消勾选“统一圆角”，将左上和右下设置为 20px，右上和左下设置为 0px。
uniform: false, topLeft: 20, topRight: 0, bottomRight: 20, bottomLeft: 0结果
生成了 border-radius: 20px 0px 20px 0px; 的 CSS 代码，实现了预期的异形按钮效果。
该工具主要生成 border-radius 属性，支持设置四个角的具体像素值。
取消勾选“统一圆角”选项，即可分别独立调整左上、右上、右下和左下四个角的半径数值。
是的，生成的 CSS 代码符合标准语法，您可以直接复制并应用到您的 CSS 文件中。
您可以根据设计需求，在 0px 到 100px 的范围内自由调整每个角的圆角半径。
不需要，这是一个完全免费的在线工具，无需安装任何插件或注册账号即可直接使用。