必须同时声明border-style才能看见边框，仅写border或border-2不够；rounded类需搭配border或背景色才可见；差异化圆角须用rounded-tl、rounded-br等原子类；边框断裂主因是缺border-style、单位冲突或box-sizing异常。
直接用 border 和 rounded 类就能快速加边框和圆角，但常见问题不是“不会写”，而是“写了没效果”——多半因为漏了关键组合或单位不匹配。
必须同时声明 border-style 才能看见边框
只写 border 或 border-2 不够。Tailwind 的 border 工具类默认包含 border-width 和 border-color，但 border-style 必须显式存在（通常是 solid），否则边框不可见。
-
border→ 等价于border: 1px solid currentColor（安全可用） -
border-2→ 仅设宽度，不带style和color，需搭配如border-gray-300和border-solid - 推荐写法：
border border-gray-300或border-2 border-solid border-blue-500
rounded 类生效的前提是“有对比”
圆角本身不改变颜色或形状，只是裁剪边缘。如果元素没有边框、背景色或父容器有溢出限制，就看不出变化。
- 单独
rounded-lg没用：得配border或bg-white等可见属性 - 头像场景典型错误：只加
rounded-full，却没设w-10 h-10（等宽高）、overflow-hidden和object-cover - 卡片类容器建议：
border border-gray-200 rounded-xl bg-white
差异化圆角要用原子类，别硬凑
一个 rounded 类只能统一四角。要单独控制某角，Tailwind 提供语义化原子类，比手写 CSS 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 仅左上圆角：
rounded-tl-lg - 顶部两个角：
rounded-t-xl - 左半边圆角：
rounded-l-md - 右下角特殊处理：
rounded-br-full - 清除某角圆角（比如右下直角）：
rounded-br-none
border 和 rounded 组合时边框断裂？检查三要素
边框在圆角处断开、错位或消失，基本是以下三个环节之一出问题：
-
缺 border-style：比如用了
border-2+border-red-500，但没写border-solid，结果只有颜色没线条 -
单位冲突：
border-4（4px）配rounded-full（9999px）没问题；但配rounded-sm（2px）可能让圆角被边框“压扁”，视觉不协调 -
box-sizing 干扰：若全局设了
box-sizing: content-box，border-radius可能导致内容溢出，建议保持默认border-box
