Tailwind CSS V4 边框完全指南（边框粗细、颜色、圆角、虚线、状态）

边框是页面分割、卡片轮廓、按钮描边、输入框的基础样式。Tailwind CSS V4 对边框系统做了底层优化，沿用 OKLCH 色彩体系，同时统一了语法，并且对变体、任意值、深色模式支持更加稳定。

本文讲解边框粗细、边框颜色、圆角、边框样式、单侧边框、状态变体、自定义边框，附带业务模板、踩坑清单和完整可运行 Demo。

一、V4 边框核心要点

1. 色彩沿用 OKLCH，边框透明度写法和背景色一致：border-blue-500/50
2. 圆角支持无限尺寸，rounded-3xl、rounded-4xl，超大圆角直接写，无需配置主题
3. 单侧边框语法不变，支持 border-t、border-r、border-b、border-l
4. 变体规则：从左向右生效，支持 @max-* 响应式断点
5. 任意值方括号语法，支持自定义宽度、颜色

二、边框宽度（粗细）

基础单位：border 等价于 border-1，1单位 = 1px

border        /* 默认 1px，最常用 */
border-0      /* 移除边框 */
border-2      /* 2px */
border-4      /* 4px */
border-8      /* 8px *//* 单侧边框 /
border-t      / 仅上边框 1px /
border-r      / 仅右边框 1px /
border-b      / 仅下边框 1px /
border-l      / 仅左边框 1px */
border-t-2    /* 仅上边框 2px /
border-b-4    / 仅下边框 4px */

三、边框颜色

语法：border-{色系}-{色阶}，透明度用 /百分比

border-transparent    /* 透明边框，占位常用 */
border-current        /* 继承文字颜色 */
border-white
border-blackborder-slate-200      /* 卡片分割线，最常用浅灰边框 /
border-blue-500       / 蓝色边框，输入框激活态 /
border-red-500        / 错误提示边框 */
/* V4 透明度写法 /
border-blue-500/40    / 40%透明度蓝色边框 */

色阶逻辑和背景色完全一致：50最浅，950最深。

四、边框样式

border-solid    /* 实线（默认） */
border-dashed   /* 虚线 */
border-dotted   /* 点线 */
border-double   /* 双线 */
border-none     /* 清除边框 */

五、圆角 rounded（V4增强）

rounded-none    /* 无圆角 */
rounded-sm      /* 小圆角 2px */
rounded         /* 默认 4px */
rounded-md      /* 6px，卡片常用 */
rounded-lg      /* 8px */
rounded-xl      /* 12px */
rounded-2xl     /* 16px */
rounded-3xl     /* 24px */
rounded-4xl     /* 32px V4支持 */
rounded-full    /* 圆形，头像、按钮 */
rounded-pill    /* 胶囊圆角 *//* 单侧圆角 /
rounded-t-lg    / 仅顶部圆角 /
rounded-br-xl   / 仅右下角圆角 */

六、状态与响应式边框（hover、focus、@max断点）

<!-- hover 切换边框颜色 -->
<div class="border border-slate-200 hover:border-blue-400 transition"></div><!-- 输入框focus边框 -->
<input class="border border-slate-300 focus:border-blue-500 focus:outline-none" />
<!-- V4响应式：大屏md圆角，小屏无圆角 -->
<div class="rounded-md @max-md:rounded-none border border-slate-200"></div>

七、任意自定义边框（方括号语法）

预设不够时直接自定义，无需修改主题

<div class="border-[3px] border-[#165DFF]"></div>
<div class="border-[2px] border-[oklch(0.6 0.2 240)]/50"></div>

八、深色模式边框

<div class="border border-slate-200 dark:border-slate-700"></div>

九、业务常用模板

<!-- 基础卡片边框 -->
<div class="border border-slate-200 rounded-lg p-4 bg-white"></div><!-- 输入框 -->
<input class="w-full border border-slate-300 rounded-md px-3 py-2 focus:border-blue-500 focus:outline-none">
<!-- 虚线分割区块 -->
<div class="border-b border-dashed border-slate-200"></div>
<!-- 圆形头像框 -->
<div class="w-12 h-12 rounded-full border-2 border-blue-500 overflow-hidden"></div>
<!-- 标签胶囊 -->
<span class="border border-blue-500/40 text-blue-600 rounded-full px-3 py-1">标签</span>

十、避坑清单

• ❌ 只写 border-slate-200 不写 border：没有边框宽度，边框不会显示
• ✅ 必须同时定义边框宽度 + 边框颜色才会渲染边框
• ✅ 卡片、表单优先使用 border-slate-200，柔和不刺眼
• ✅ 透明边框 border-transparent 适合需要占位、hover再显示边框的场景，不会造成布局跳动
• ✅ 圆角使用 rounded-lg / rounded-xl 是现代UI主流，不要过大圆角，容易显得廉价
• ✅ 做动画hover边框切换时，加上 transition 实现平滑过渡

十一、完整可运行 Demo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V4 边框 Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-brand: #165DFF;
    }
  </style>
</head>
<body class="p-6 bg-slate-50 space-y-4">
  <h1 class="text-3xl font-bold text-center mb-8">Tailwind CSS V4 边框演示</h1>

  <!-- 基础卡片边框 -->
  <div class="border border-slate-200 rounded-lg p-4 bg-white">
    基础卡片 border + rounded-lg
  </div>

  <!-- 虚线边框 -->
  <div class="border border-dashed border-slate-300 rounded-lg p-4 bg-white">
    虚线边框 border-dashed
  </div>

  <!-- 单侧边框 -->
  <div class="border-l-4 border-blue-500 p-4 bg-blue-50 rounded-r-lg">
    左侧粗边框，提示栏
  </div>

  <!-- 半透明边框 -->
  <div class="border border-blue-500/40 rounded-lg p-4 bg-white">
    半透明边框 border-blue-500/40
  </div>

  <!-- 圆形 -->
  <div class="w-20 h-20 rounded-full border-4 border-green-500 flex items-center justify-center bg-white">
    圆形
  </div>

  <!-- hover变色 -->
  <div class="border border-slate-200 hover:border-brand transition rounded-lg p-4 bg-white cursor-pointer">
    hover切换边框颜色
  </div>

  <!-- 响应式圆角 -->
  <div class="border border-slate-200 rounded-xl @max-md:rounded-none p-4 bg-white">
    大屏圆角，小屏直角（缩放窗口查看）
  </div>

</body>
</html>

总结

Tailwind CSS V4 的边框体系简洁统一，记住：边框需要同时指定宽度与颜色；圆角直接选用预设；半透明用 /xx 后缀；响应式使用 @max-*。在卡片、表单、分割线、标签组件中，边框和圆角搭配使用，是塑造页面层次的关键。

Tailwind CSS V4 边框速查表

一、边框宽度

二、边框颜色

三、边框样式

四、圆角 rounded

五、常用模板

<!-- 卡片 -->
<div class="border border-slate-200 rounded-lg p-4 bg-white"></div><!-- 输入框 -->
<input class="border border-slate-300 rounded-md px-3 py-2 focus:border-blue-500 focus:outline-none">
<!-- 左侧高亮提示条 -->
<div class="border-l-4 border-blue-500 p-4 bg-blue-50 rounded-r-lg"></div>
<!-- 圆形头像 -->
<div class="w-12 h-12 rounded-full border-2 border-blue-500"></div>

速记要点

1. 边框必须同时写宽度 + 颜色，只写颜色不会显示边框
2. 页面分割优先 border-slate-200
3. 半透明边框使用 /百分比，和背景色语法统一
4. hover切换边框记得加 transition 实现平滑动画