圆角生成器
200px
CSS 代码
border-radius: 16px;预设模板
CSS圆角生成器使用指南
UOTOL圆角生成器是一款在线CSS border-radius可视化生成工具。支持四个角独立调整，内置圆形、胶囊、水滴等6种预设模板，一键复制CSS代码。所有数据本地处理，不上传服务器。
功能特点
- 可视化调整border-radius四个角的圆角值
- 支持四角联动统一调整和独立调整
- 6种预设模板：圆形、胶囊、水滴、树叶、标签、对话框
- 可调整预览盒子大小
- 一键复制生成的CSS代码
使用步骤
- 拖动滑块调整四个角的圆角值
- 勾选"四角联动"统一调整所有角
- 从预设模板快速应用常用圆角效果
- 点击"复制CSS"按钮复制border-radius代码
常见问题
border-radius的四个值分别对应哪个角？
四个值按顺时针顺序：左上、右上、右下、左下。当只有一个值时四角相同，两个值时为左上右下、右上左下。
如何实现圆形？
将border-radius设为50%（或元素宽高的一半），同时确保元素宽高相等即可实现圆形。
border-radius支持百分比吗？
支持，百分比基于元素的尺寸计算。50%在正方形上产生圆形，在长方形上产生椭圆形。