⭕ Border Radius Generator

📐 工作原理与说明

四角半径分别映射为 CSS border-radius 的左上 / 右上 / 右下 / 左下值，实时预览并生成声明；支持独立设置各角，用于前端圆角样式落地。

Drag to set the corner radius of an element and copy ready-to-use CSS border-radius, with independent control of all four corners.

统一圆角

单独控制每个角

左上

右上

右下

左下

预览

Border Radius

📚 深度解析：圆角生成器

生成左上 24px、右下 50% 圆角

输入：TL 24px、TR 8px、BR 50%、BL 8px。处理：拼接 border-radius 简写。输出：实时预览与 <code>border-radius:24px 8px 50% 8px;</code> 代码。

百分比是相对什么？: 相对元素自身的宽高，因此方形与长条形会得到不同弧度。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
生成的代码/图片能直接用吗？: 可直接复制使用，建议粘到项目后在浏览器实测微调；本工具只生成不托管。
会保存或上传我的内容吗？: 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。