圆角与边框生成器
异形圆角不用一格格试。四个角能分开调，px 与百分比随手切，边框的宽度、线型、颜色在旁边一起改，右边的形状就是最终效果，满意了整段代码复制走。
- 圆角和边框一起调：滑块配数字输入框，8px 这种精确值直接敲，不用对准刻度。
- 三种宽高比实测：百分比圆角随宽高比变形，切到宽条马上能看出是圆还是胶囊。
- 能反向解析：手上已有
border-radius代码，粘进来就还原成控件状态，不用重调。
调整圆角与边框
本地实时渲染正常 四角半径之和未超过预览边长，浏览器按设定值渲染。
大于 0 时输出 水平半径 / 垂直半径，垂直半径按比例压缩，做压扁的胶囊、水滴、叶片形状靠它。
生成的代码
CSS 与 Tailwind 两种写法形状预设
点一下套用，再按需微调同一组参数，套在四种元素上
看小尺寸元素会不会被大圆角撑变形主按钮
立即试用内容卡片
卡片标题一行说明文字，用来观察圆角与内边距的关系。标签 / 徽标
标签输入框
粘贴已有代码，反向解析
支持 1~4 个值、斜杠椭圆写法，单位需一致（全 px 或全 %）。
嵌套元素的内圆角
内层建议圆角：10px
算法是外层圆角减去内边距，小于 0 时取 0。两条弧线同心，看起来才不会「鼓」出来。
AI 圆角方案点评
需人机验证让 AI 判断这组圆角的气质是否匹配元素用途，并给出卡片、按钮、输入框之间的比例关系建议。首次点击会先弹出点选验证码。
圆角写错，多半栽在这几处
参数本身只有四个值，难的是它和宽高、边框、父元素内边距之间的关系。
四个值的顺序是从左上角顺时针
border-radius: 8px 16px 24px 4px 依次是左上、右上、右下、左下。写两个值时第一个管左上与右下、第二个管右上与左下；写三个值时第四个值直接复制第二个。这条规则和 margin 的四值简写完全一致，记一个就够了。
半径写大了，浏览器会偷偷帮你缩小
规范里有一条：当同一条边上两个角的半径之和超过该边长度时，所有圆角会按同一个比例 f 缩小，f 取各边比值中的最小值。所以给 100×40 的标签写 border-radius: 100px，实际渲染是 20px——你写的值根本没生效，页面上方那块提示就是在告诉你这件事。想得到两端半圆的胶囊，写 999px 或 50% 都行，因为不管写多大都会被截到「刚好半圆」。
嵌套元素的内圆角要递减
外层卡片 16px 圆角、内边距 6px，里面的块如果也用 16px，两条弧线不同心，转角处会显得凸出来一块。内层圆角取 外层圆角 − 内边距（不小于 0），视觉上才贴合。页面里那个嵌套计算器就是干这个的。
百分比不是「圆」，是「按边算的椭圆」
50% 的水平半径按宽度算、垂直半径按高度算，所以只有正方形才是正圆，240×120 的元素会得到胶囊。这也是为什么头像用 50% 之前要先确保宽高相等，否则做出来永远是椭的。
边框宽度会占掉圆角的一部分
边框画在盒子外边缘内侧，所以边框越粗，内边缘的可见圆角就越小：内边缘半径大约是 外半径 − 边框宽度。1px 边框基本看不出来，4px 以上就该把圆角相应调大一点，否则转角会显尖。另外 border 只能是一个颜色，想做「渐变描边」得用 background-clip: padding-box 配合 border: transparent，或者干脆用 box-shadow 叠一层。
圆角会连阴影一起裁掉
元素自身有 overflow: hidden 时，圆角会把溢出的图片、视频切掉，同时也会切掉子元素向外扩散的阴影。需要「圆角内裁切 + 外投影」时，把阴影放在父元素上，或者用伪元素单独承载阴影。
常见问题
为什么设了 50% 却不是正圆？
50% 不是「边长的一半」，而是「宽度的 50% 作水平半径、高度的 50% 作垂直半径」。元素宽高不等时，两个半径就不同，画出来就是椭圆。要正圆，先让 width 与 height 相等，或者用 aspect-ratio: 1 锁住比例。
999px 和 50% 该用哪个？
对固定尺寸的元素两者结果几乎一样，都会被规范截到「刚好半圆」。区别在响应式场景：50% 会跟着宽高变化自动重算，元素被拉长时仍是半圆端点；999px 是绝对值，元素尺寸超过 1998px 才会露馅。做胶囊按钮用 999px，做头像、图片裁切用 50%。
四角不一致会有什么问题？
单个元素用没问题，比如气泡的尖角、叶片的对角。但成组出现时（一排卡片、一列按钮）四角方向不一致，视觉重心会左右偏。真要统一，让同一侧的圆角逻辑一致：列表项统一做「左上左下大、右上右下小」，而不是每个随手设。
圆角、边框、阴影一起用有顺序讲究吗？
有。边框画在盒子内侧，阴影画在盒子外侧并跟随外圆角轮廓。所以粗边框 + 大圆角时，阴影会沿着外轮廓走、边框占掉内侧，看起来像双层线。想要干净的「细边 + 柔和投影」，边框宽度控制在 1px，把层级感交给阴影。
深色模式下圆角需要改吗？
圆角数值不用改，但大圆角在深色背景上边界更模糊，因为缺少阴影对比。这时把边框的不透明度提一点、圆角适当收小，轮廓会清楚很多。图中颜色块可以切到深色主题看效果。