已复制

CSS 圆角生成器

Border Radius 可视化调节,支持 8 个角独立编辑

CSS 代码
border-radius: 10px;
使用说明
8 个角独立调节

支持 CSS border-radius 的完整写法:top-left-xtop-left-ytop-right-xtop-right-ybottom-right-xbottom-right-ybottom-left-xbottom-left-y 共 8 个参数独立调节。拖动滑块时左侧预览方块实时更新,也可使用 CSS 渐变生成器 工具。

单位切换

通过底部的 px / % 按钮可以在像素和百分比两种单位之间切换。切换后所有滑块的取值范围自动变更,CSS 代码也会相应更新,可配合 CSS 阴影生成器 工具一起使用。

快速等比例

每个角的 x 和 y 方向可独立设置。如需等比例圆角(对称),将 x 和 y 设置为相同值即可。预览块会实时渲染椭圆角效果,也可使用 CSS 毛玻璃 工具。

复制 CSS 代码

面板底部实时展示生成的 CSS 代码,点击「复制代码」即可复制到剪贴板使用。