Tailwind仅支持tl/tr/bl/br四类方向前缀控制单角圆角，如rounded-tl-lg；rounded-t等控制整边两角；自定义数字后缀需在config中显式配置borderRadius。
用 rounded-tl-lg 这类方向类控制单角圆角
Tailwind 不支持 rounded-top-lg 或 rounded-left-sm 这种写法，所有方位控制必须用固定前缀组合：只认 tl（top-left）、tr（top-right）、bl（bottom-left）、br（bottom-right）。其他如 rounded-t 是控制整条上边（两个角），不是“顶部方向”。
常见误写：rounded-tr-4 会失效——因为 Tailwind 默认不生成带数字后缀的方向类；rounded-bl-none 也不存在，正确写法是 rounded-bl-0（需在配置中显式定义 '0': '0'）或直接用 rounded-bl-none（v3.3+ 支持，但仅限预设值）。
-
rounded-tl-lg：仅左上角为 8px，其余直角 -
rounded-tr-none：仅右上角无圆角（前提是项目启用了none值，默认开启） -
rounded-b-xl：底边两个角（左下 + 右下）统一为 1.25rem - 要清掉某个角的圆角，不能靠覆盖，得用对应方向类显式设为
none或0
为什么 rounded-br-full 没效果？检查三件事
加了 rounded-br-full 却还是直角，大概率不是类名写错，而是底层条件缺失：
- 元素没尺寸：比如空
<div></div>，没有width/height或内容撑开，border-radius无处可作用 - 没视觉对比：没设
border、bg-color或父容器未设overflow: visible，圆角裁剪不可见 - 被其他样式覆盖：比如全局 CSS 里写了
* { border-radius: 0 !important }，会直接干掉所有rounded-类
验证方式：临时加 bg-blue-200 和 border，看是否立刻出现弧度。
立即学习“前端免费学习笔记（深入）”；
自定义方向圆角必须改 tailwind.config.js
想让 rounded-tr-6 生效？默认不行。Tailwind 不会为任意数字生成方向类，必须手动扩展 theme.borderRadius：
borderRadius: {
'0': '0',
'6': '6px',
'12': '12px',
// 注意：'tr-6' 这种写法仍无效，方向类只接受已定义的键
}然后才能用 rounded-tr-6 ——但前提是你的 Tailwind 版本 ≥ v3.3 且插件启用。更稳妥的做法是只用已支持的预设值（sm/md/lg 等），避免跨版本兼容风险。
另外，rounded-l 和 rounded-r 控制左右两侧（含上下两角），不是“左边框圆角”，别和 border-l 混淆。
border 和 rounded 组合时边框在圆角处断裂
这不是渲染 bug，而是三个配置没对齐：
- 缺
border-style：比如只写border-2 border-red-500，没加border-solid，边框线条根本不会画出来 - 单位冲突：用
border-4（4px）配rounded-sm（2px），圆角半径太小，边框在拐角处挤压变形 -
box-sizing异常：若全局设了box-sizing: content-box，border-radius可能导致内容溢出容器，视觉上像边框“断开”
最简修复：统一用 border border-gray-300 rounded-lg（border 自带 solid），并确保项目保持默认 box-sizing: border-box。
真正容易被忽略的是：方向类（如 rounded-br-lg）只改一个角，但它依赖整个元素的盒模型完整存在——如果父容器 overflow: hidden 且子元素定位偏移，那个“右下角”可能早就被裁掉了。
