CSS 圆角（border-radius） 是元素四角的圆滑半径属性，CSS 3 引入后已成所有现代界面的基础。它支持每个角独立设置水平和垂直半径，配合可以做出从基础卡片到不规则有机形状的几乎所有圆角形态。
| 用法 | 语法示例 | 形态 |
|---|---|---|
| 统一圆角 | border-radius: 12px; | 4 角同样的小圆 |
| 4 角不同 | border-radius: 12px 4px 12px 4px; | 对角对称 |
| 椭圆角（X≠Y） | border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | 有机斑块 |
| 胶囊 | border-radius: 9999px; | 完美胶囊 / 圆形头像 |
px 是绝对像素，无论容器大小都保持 8px 就是 8px——适合卡片、按钮、输入框这类视觉重量稳定的元素。% 是相对容器宽高的百分比——50% 时无论容器多大都得到正圆 / 椭圆，适合头像、有机斑块、装饰图形。胶囊形按钮两种都行：用 9999px（够大就够圆）或在固定高度的容器上用 50%。
日常 UI 的卡片、按钮、模态框 95% 都是 4 角统一圆角，用联动模式即可。独立模式专门用来做装饰性形状：
本工具的预设按这个分类：前 4 个胶囊 / 小 / 中 / 大圆走联动，后 8 个有机形状全部独立。
CSS 引擎会自动按重复值缩写：
本工具输出已按这个规则简化。
完整语法是 <code>border-radius: TL TR BR BL / TL TR BR BL</code>——斜杠前是水平半径（X），斜杠后是垂直半径（Y）。X = Y 时得到圆形角，X ≠ Y 时得到椭圆形角。这种细粒度控制是 CSS 做不规则形状的基础——叶子、对话气泡、波浪边缘都靠它。本工具默认输出双值语法，X 和 Y 全等时自动简化为单值。
px 是绝对像素，无论容器大小都保持 8px 就是 8px——适合卡片、按钮、输入框这类视觉重量稳定的元素。% 是相对容器宽高的百分比——50% 时无论容器多大都得到正圆/椭圆，适合头像、有机斑块、装饰图形。胶囊形按钮两种都行：用 9999px（够大就够圆）或在固定高度的容器上用 50%。
因为 % 是分别相对宽和高计算——50% 的水平半径 = 宽 × 50%，50% 的垂直半径 = 高 × 50%。长方形容器宽 ≠ 高，所以两个半径不等，自然就是椭圆。要在长方形容器里得到正圆区域，需要手动把两个半径设成相同的 px 值（容器较短边的一半）。
联动模式适合 95% 的场景——四个角统一的圆角是绝大多数 UI 的标准做法（卡片、按钮、模态框）。独立模式专门用于做不规则形状：叶子（对角圆其他直角）、对话气泡（一角带 tail）、波浪/斑块（4 角不同椭圆参数组合）、票根（一边圆角一边直角）。本工具的预设里前 4 个用联动，后 8 个全部走独立模式。
完全支持。<code>border-radius</code> 在 IE 9+（2011）就已支持，斜杠分隔的 X/Y 双值语法在 IE 9+、Chrome/Safari/Firefox 全部稳定。无需任何前缀。本工具直接输出标准 CSS 语法，可以放心粘贴到任何项目。
border-radius: TL TR BR BL / TL TR BR BL（X 在前 / Y 在后）