推荐按像素值或语义分层命名如 rounded-sm（2px）、rounded-md（4px）、rounded-lg（8px）、rounded-full（50%）；单个 class 即可统一四角，无需拆分；常见不圆原因包括缺少 overflow: hidden、被重置样式覆盖、UA 默认样式干扰或 Safari 渲染异常；响应式推荐用 clamp() 动态计算圆角。
border-radius 工具类命名怎么定才不冲突
直接用 rounded 作为通用类名容易和框架（如 Bootstrap、Tailwind）撞车，也难区分程度。推荐按像素值或语义分层命名，比如：rounded-sm（2px）、rounded-md（4px）、rounded-lg（8px）、rounded-full（50%）。避免用 rounded-1 这类无意义数字后缀，别人看不懂，自己三个月后也懵。
如何用单个 class 控制所有边角而非分别写四个方向
border-radius 本身支持简写语法，工具类只需声明一个值就能统一四角：
.rounded-md { border-radius: 4px; }。不需要写 border-top-left-radius 等拆分属性——除非你真要异形圆角（比如左直右圆），那就不属于“工具类”范畴了，该用内联样式或专用类。
为什么加了 rounded 类按钮还是不圆？常见原因有哪些
排查顺序建议如下：
- 检查元素是否设置了
overflow: hidden—— 没有它，子内容（比如图标、文字）可能溢出遮盖圆角视觉效果 - 确认没有其他 CSS 强制重置了
border-radius，比如重置库的* { border-radius: 0; } - 按钮是
<button>还是<a>？某些 UA 样式会给button默认border-radius，覆盖你的类，需用!important或提高选择器权重 - 是否用了
background-clip: padding-box？旧版 Safari 对border-radius + background-image组合渲染异常，加这句可修复
要不要为不同尺寸按钮配不同圆角
要，但不是必须写一堆类。更合理的方式是结合 CSS 自定义属性动态计算：
.btn { border-radius: clamp(4px, 0.5em, 8px); }。这样小按钮圆角小（防过圆），大按钮圆角大（保持比例），响应式友好。硬写 btn-sm-rounded btn-lg-rounded 类，维护成本高，且无法应对字体缩放或视口变化。
立即学习“前端免费学习笔记（深入）”；
