TailwindCSS 邊框：border、rounded 圓角、ring 焦點環全解 | TailwindCSS 完整教學

上一篇替版面上好了「面」與「光」，這一篇替每個區塊「描邊、圓角、分隔」。TailwindCSS 的邊框系統涵蓋 border（佔空間的邊框）、rounded（圓角）、ring（不佔空間的焦點環）、outline（輪廓）與 divide（子元素分隔線）五大類。v4 對這套系統動了幾刀——border 預設色改成 currentColor、ring 預設寬度從 3px 降為 1px，還新增了獨立的 inset-ring-* 內側環。這一篇會帶你把邊框、圓角與分隔線做得又俐落又有層次。

前言

上一篇 《背景與漸層》 我們把單一顏色延伸成「面」與「光」，玩透了背景色、漸層與 mask 遮罩，版面開始有質感。但目前元素之間還缺乏清楚的界線與層次：卡片沒有邊、按鈕沒有圓角、清單項目之間沒有分隔、輸入框 focus 時看不出焦點在哪。這些「輪廓」的活，正是這一篇 邊框 要交給你的工具。

用一個生活化的類比來理解邊框系統：想像你在裱一幅畫。 最基礎的是替畫「加一圈畫框」（border 邊框，有寬度、顏色、樣式），畫框可以四邊一致、也可以只裱某一邊；再來是把畫框的四個角磨圓（rounded 圓角），從微微收邊到完全的圓形都行；如果牆上掛了好幾幅畫，你會在畫與畫之間拉一條分隔線（divide）；而當你用聚光燈打在某幅畫上、讓它從牆面「浮」出來時，那圈光暈既不佔牆面空間、又能引導視線，這正是 ring（焦點環）與 outline（輪廓）的角色。Tailwind 把這一整套裱框工法都做成了 class，你不用手寫 CSS 的 border、border-radius、box-shadow 與 outline，就能組出俐落的視覺邊界。

而 TailwindCSS v4 是本系列的預設版本，它對邊框系統做了幾項關鍵變更：border 沒指定顏色時預設值從 gray-200 改為 currentColor、ring 預設寬度從 3px 降為 1px、新增獨立的 inset-ring-* 內側環，以及邏輯屬性 border-s／border-e。本篇你將學到：

• border 三要素：寬度（border／border-2／border-4）、顏色（border-gray-200）、樣式（border-solid／border-dashed／border-dotted）
• 單邊與邏輯邊框：border-t／border-r／border-b／border-l、border-x／border-y，與 RTL 自動翻轉的 border-s／border-e
• rounded 圓角：rounded-sm～rounded-3xl、各角 rounded-tl／rounded-br、膠囊 rounded-full
• ring／outline／divide：ring-* 焦點環、v4 全新 inset-ring-* 內側環、outline-* 輪廓、divide-x／divide-y 分隔線
• v3 → v4 差異：border 預設色改 currentColor、ring 預設 1px、inset-ring-* 新增、圓角刻度平移

本系列以 TailwindCSS v4 為預設版本，範例皆可直接執行。凡涉及 v3 差異之處，我會特別標註。

核心概念

邊框工具的五大類

Tailwind 的邊界 utility 依「用什麼機制、佔不佔空間」分成五大類：border（佔空間的邊框）、rounded（圓角）、ring（box-shadow 模擬的焦點環）、outline（真正的 CSS 輪廓）與 divide（子元素間的分隔線）。下表先建立全景：

不用一次記完。核心心智模型只有一句話：border 佔空間、會撐大元素（適合卡片與表格）；ring、outline、inset-ring 都不佔空間、畫在元素邊上（適合焦點與高亮）；rounded 負責磨圓角、divide 負責在子元素之間畫線。

border 的三要素：寬度、顏色、樣式

一道 border 由三件事決定，理解這一點就掌握了邊框的基礎：寬度（多粗）、顏色（什麼色）、樣式（實線還是虛線）。

寬度用 border（預設 1px）、border-2（2px）、border-4、border-8 決定四邊，或用單邊 class 只裱某一邊：

四邊 border          單邊 border-l-4        邏輯 border-s（RTL 翻轉）
┌──────────────┐    ┃ 只有左側粗邊         起始側邊框
│  content     │    ┃ content              LTR → 左；RTL → 右
└──────────────┘    ┃ 常用於引用區塊

顏色用 border-{色相}-{色階} 決定，和上色工具完全一致，例如 border-gray-200、border-blue-500。這裡有 v4 最重要的變更：沒指定顏色時，v4 的 border 預設是 currentColor（跟著文字色走），而 v3 是 gray-200。 所以在 v4 一律建議明確寫出顏色。樣式用 border-solid（實線，預設）、border-dashed（虛線）、border-dotted（點線）、border-double（雙線）決定。

rounded 圓角與 v4 刻度平移

圓角用 rounded-* 控制 border-radius，從微收邊到完全圓形一應俱全。v4 對圓角刻度做了「整體往下平移一級」的調整，這是遷移時要留意的重點：

v4 圓角平移提醒：v3 的 rounded（4px）在 v4 改名為 rounded-sm，並新增更小的 rounded-xs（2px）與更大的 rounded-4xl（32px）。從 v3 遷移時，最容易漏的就是把單獨的 rounded 改成 rounded-sm。rounded-full 在 v4 的 CSS 值是 calc(infinity * 1px)。

單角可用 rounded-tl（左上）、rounded-tr（右上）、rounded-br（右下）、rounded-bl（左下）；雙邊用 rounded-t（上兩角）、rounded-r／rounded-b／rounded-l。v4 還提供邏輯屬性 rounded-s（起始側兩角）、rounded-e（結束側兩角），會隨 LTR／RTL 佈局自動翻轉。

ring、outline、inset-ring 的差異

這三者都不佔空間、都畫在元素邊上，但機制與用途不同，是初學者最容易混淆的地方：

border（佔空間，撐大元素）：
┌────────────────────────┐
│  content               │  ← 加上去元素會變大
└────────────────────────┘

outline（真 CSS outline，畫在 border 外，可設 offset）：
╔════════════════════════╗  ← outline-2，不佔空間
║ ┌────────────────────┐ ║
║ │ content            │ ║
║ └────────────────────┘ ║
╚════════════════════════╝  ← outline-offset 控制與元素的距離

ring（box-shadow 模擬，可與 shadow / inset-ring 疊加）：
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  ← ring-2，v4 預設 ring 為 1px
▓ ┌────────────────────┐ ▓
▓ │ content（可再疊內環）│ ▓  ← inset-ring 畫在內緣
▓ └────────────────────┘ ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

三個關鍵術語：

• ring（焦點環）：用 box-shadow 模擬的外側環，能設寬度（ring-2）、顏色（ring-blue-500）、間隔（ring-offset-2）。v4 的 ring 預設寬度是 1px，而 v3 是 3px，這是遷移時最容易被忽略的差異。焦點環首選它，因為最靈活。
• outline（輪廓）：真正的 CSS outline，用 outline-2、outline-blue-600、outline-offset-2 控制。它畫在元素外緣、可用 outline-offset-* 拉開與元素的距離，最大優點是對 Windows 高對比／強制色彩模式友善（ring 靠 box-shadow 在這些模式下可能被系統移除，outline 則會保留）。v4 新增 outline-hidden 取代 v3 outline-none 的舊行為——它在視覺上隱藏焦點框，卻在強制色彩模式下保留一個透明輪廓以維持無障礙，這是 v4 對可存取性的貼心強化。
• inset-ring（內側環，v4 新增）：畫在元素內緣的環（inset box-shadow），有自己的寬度 inset-ring-2 與顏色 inset-ring-black/10。它獨立於 ring-inset（後者只是把 ring 翻到內側），可與外側 ring-* 同時堆疊做「外環＋內環」雙重描邊。

divide 分隔線

divide-x／divide-y 專門在相鄰子元素之間畫線，原理是對容器套用 & > * + * 選擇器、在每個「非第一個」子元素上加邊框。divide-y 做水平分隔線（垂直堆疊的清單）、divide-x 做垂直分隔線（水平排列的按鈕群）。顏色用 divide-gray-200、寬度用 divide-y-2、樣式用 divide-dashed。要注意：它只在 flex／block 容器的直接子元素間有效，grid 容器無效（grid 請改用 gap 加背景色模擬）。

divide 和「替每個項目手動加 border-b」的差別在於自動處理首尾：手動加 border-b 會讓最後一個項目下方多出一條懸空的線，得再寫 last:border-b-0 去掉；而 divide-y 天生只在項目「之間」畫線，第一個項目上方、最後一個項目下方都乾淨無線，這正是它比手動邊框優雅的地方。實務上，清單、選單、表格列、設定頁的分段，都是 divide-y 的主場。

邏輯屬性與 RTL 支援

前面反覆提到的 border-s／border-e 與 rounded-s／rounded-e 屬於 v4 強化的邏輯屬性（logical properties）。物理屬性如 border-l（左）、border-r（右）、rounded-tl（左上）是「寫死方向」的——不論頁面是從左到右（LTR，如中英文）還是從右到左（RTL，如阿拉伯文、希伯來文），左永遠是左。而邏輯屬性 border-s（start，起始側）、border-e（end，結束側）會跟著書寫方向自動翻轉：在 LTR 佈局中 border-s 等於左邊框，在 RTL 佈局中則自動變成右邊框。

這對需要支援多語系的專案至關重要。舉例來說，一個引用區塊在中文版用 border-l-4 靠左裱邊看起來很自然，但同一份程式碼套到阿拉伯文版時，文字從右往左讀，靠左的邊框就變得彆扭。改用 border-s-4 之後，同一個 class 在中文版靠左、在阿拉伯文版自動靠右，不必為 RTL 另寫一套樣式。圓角同理：對話泡泡的尾巴用 rounded-es-none（end-start，結束側的起始角）而非 rounded-bl-none，就能在 RTL 佈局中自動對調到正確的角。若你的產品沒有國際化需求，用物理屬性也完全沒問題；但只要可能支援 RTL，養成用邏輯屬性的習慣會省下大量重工。

實作範例

理論看完，我們用幾個高頻範例把邊框、圓角、焦點環與分隔線串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：卡片邊框變體

最日常的邊框用途就是替卡片描邊。訣竅是明確指定邊框顏色（v4 必要）、搭配圓角，並善用單邊邊框做引用與虛線做上傳區：

<!-- 基礎卡片：明確指定 border-gray-200（v4 一定要寫顏色） -->
<div class="border border-gray-200 rounded-xl p-6 bg-white">
  <h3 class="font-semibold text-gray-900">標準卡片</h3>
  <p class="mt-1 text-sm text-gray-500">明確指定邊框顏色，避免 v4 預設 currentColor 變黑</p>
</div>

<!-- 只有左側粗邊：引用／提示區塊 -->
<div class="border-l-4 border-l-indigo-500 rounded-r-lg bg-indigo-50 py-3 pl-4">
  <blockquote class="font-medium text-indigo-900">單邊邊框最適合做引用區塊</blockquote>
</div>

<!-- 虛線邊框：檔案上傳區 -->
<div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center
            hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
  <p class="text-gray-500">點擊或拖放檔案到此處</p>
</div>

三張卡片示範了 border 的核心用法。第一張是最基礎的四邊卡片，重點是明確寫出 border-gray-200——在 v4 若只寫 border 不寫顏色，邊框會變成 currentColor（跟著文字變黑）。第二張用 border-l-4 border-l-indigo-500 只裱左側一道粗邊，這是引用區塊、側邊提示最經典的手法，右側再配 rounded-r-lg 讓右邊兩角收圓。第三張用 border-2 border-dashed 做虛線上傳區，hover 時把邊框色與底色一起換掉產生互動回饋。

v4 提醒：以上三張卡片在 v3 中即使不寫 border-gray-200，border 也會有淡灰預設色；但 v4 改為 currentColor，務必明確指定顏色。這是從 v3 遷移最常「邊框莫名變黑」的原因。

範例二：表單焦點環（ring 與 inset-ring）

輸入框的 focus 樣式是 ring 的主戰場。這裡示範用 focus:ring 取代預設 outline，並用 v4 新的 inset-ring 做內描邊：

<!-- 標準輸入框：focus 時顯示 2px 藍色焦點環 -->
<input type="text" placeholder="使用者名稱"
       class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-gray-900
              placeholder:text-gray-400 transition
              focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500">

<!-- 錯誤狀態：紅色邊框 + 紅色焦點環 -->
<input type="text" value="格式錯誤"
       class="w-full rounded-lg border-2 border-red-300 bg-red-50 px-4 py-2.5 text-gray-900
              focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500">

<!-- v4 雙重描邊：外側 ring + 內側 inset-ring 疊加 -->
<button class="rounded-lg bg-slate-900 px-5 py-2.5 font-medium text-white
               ring-2 ring-slate-900 inset-ring-1 inset-ring-white/20">
  外環＋內環按鈕
</button>

三個範例示範了不佔空間的邊界。第一個是輸入框的黃金組合：focus:outline-none 移除瀏覽器預設輪廓、focus:ring-2 focus:ring-blue-500 換上自訂的藍色焦點環——注意 v4 一定要寫 ring-2，因為 ring（無數字）在 v4 只有 1px，太細看不清。第二個是錯誤狀態，邊框與焦點環都用紅色，語義清楚。第三個展示 v4 的招牌新功能：ring-2 ring-slate-900（外環）與 inset-ring-1 inset-ring-white/20（內環）同時存在，做出深色按鈕上緣那圈細微的高光描邊，這在 v3 是做不到的。

v4 提醒：ring 預設寬度從 v3 的 3px 改為 v4 的 1px。若你從 v3 遷移、原本靠 focus:ring 得到明顯的 3px 環，v4 要改寫成 focus:ring-3 才能維持相同外觀。inset-ring-* 則是 v4 全新工具，v3 沒有對應寫法。

範例三：分隔線清單與按鈕群（divide）

divide-* 讓「清單項目之間畫線」不必手動替每個項目加 border-b。它自動跳過第一個子元素、只在項目之間畫線：

<!-- 垂直分隔清單：divide-y 在每個項目間畫水平線 -->
<ul class="divide-y divide-gray-200 rounded-xl border border-gray-200 overflow-hidden">
  <li class="flex items-center gap-4 p-4 hover:bg-gray-50 transition-colors">
    <span class="grid size-10 place-items-center rounded-full bg-blue-100 font-bold text-blue-600">A</span>
    <div class="min-w-0 flex-1">
      <p class="font-medium text-gray-900">使用者一</p>
      <p class="truncate text-sm text-gray-500">user-a@example.com</p>
    </div>
  </li>
  <li class="flex items-center gap-4 p-4 hover:bg-gray-50 transition-colors">
    <span class="grid size-10 place-items-center rounded-full bg-green-100 font-bold text-green-600">B</span>
    <div class="min-w-0 flex-1">
      <p class="font-medium text-gray-900">使用者二</p>
      <p class="truncate text-sm text-gray-500">user-b@example.com</p>
    </div>
  </li>
</ul>

<!-- 水平分隔按鈕群：divide-x 在按鈕間畫垂直線 -->
<div class="inline-flex divide-x divide-gray-200 rounded-lg border border-gray-200 overflow-hidden">
  <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">左</button>
  <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">中</button>
  <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">右</button>
</div>

兩個範例示範了 divide 的兩個方向。清單用 divide-y divide-gray-200，容器只要包住所有 <li>，Tailwind 就自動在相鄰項目之間加一條水平線，你完全不用管每個項目該不該加 border-b（第一個項目上方不會有多餘的線）。按鈕群用 divide-x divide-gray-200 在水平排列的按鈕之間畫垂直分隔線，做出常見的分段控制器（segmented control）。兩者都配上 border 外框、rounded-lg 圓角與 overflow-hidden——最後這個很關鍵：有圓角的容器一定要加 overflow-hidden，否則子元素的方角背景會「衝出」圓角。

範例四：圓角設計模式（rounded）

圓角是現代 UI 的靈魂。從頭像的完全圓形、Badge 的膠囊，到對話泡泡的不等圓角，都靠 rounded-* 家族：

<!-- 頭像：完全圓形 + 白邊 + 陰影 -->
<img src="/img/avatar.jpg" alt="頭像"
     class="size-12 rounded-full border-2 border-white object-cover shadow-md">

<!-- 狀態 Badge：膠囊圓角 -->
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">已完成</span>

<!-- 膠囊按鈕：rounded-full 讓左右兩端呈半圓 -->
<button class="rounded-full bg-blue-600 px-6 py-2.5 font-medium text-white">膠囊按鈕</button>

<!-- 對話泡泡：三角尾巴用「某一角不圓」製造 -->
<div class="max-w-xs rounded-2xl rounded-bl-none bg-blue-600 p-4 text-white">
  這是一則訊息泡泡，左下角用 rounded-bl-none 拿掉圓角當作尾巴
</div>

四個範例串起圓角的常見場景。頭像用 rounded-full 變圓，再配 size-12 讓寬高相等（rounded-full 只有在正方形上才是正圓）。Badge 與膠囊按鈕同樣用 rounded-full，因為半徑無限大，左右兩端會自動收成完美的半圓。對話泡泡最巧妙：先用 rounded-2xl 把四角都收圓，再用 rounded-bl-none 單獨把左下角改回方角，做出訊息泡泡指向頭像的「尾巴」——這種「整體圓角＋單角方角」的組合，正是各角 class（rounded-bl／rounded-tr 等）最實用的地方。

常見錯誤與最佳實踐

五個最容易踩的邊框與圓角坑

坑一：v4 的 border 忘了指定顏色，邊框莫名變黑。 從 v3 帶來的習慣是只寫 border（v3 有 gray-200 預設色），但 v4 預設改成 currentColor，邊框會跟著文字變黑、看起來很突兀。根治法：一律明確指定邊框顏色，例如 border border-gray-200。

<!-- ❌ v4 只寫 border，邊框變成 currentColor（跟文字同色，常是黑色） -->
<div class="border rounded-lg p-4">卡片</div>

<!-- ✅ v4 明確指定顏色 -->
<div class="border border-gray-200 rounded-lg p-4">卡片</div>

坑二：v4 的 ring（無數字）太細看不清。 v4 把 ring 預設寬度從 3px 降為 1px，從 v3 遷移的專案若靠 focus:ring 產生焦點環，會突然變得很細。根治法：明確寫 ring-2 或 ring-3，別依賴無數字的 ring。

<!-- ❌ v4 中 focus:ring 只有 1px，太細 -->
<input class="focus:outline-none focus:ring focus:ring-blue-500">

<!-- ✅ 明確指定寬度（focus:ring-3 等效於 v3 的 focus:ring） -->
<input class="focus:outline-none focus:ring-2 focus:ring-blue-500">

坑三：移除 outline 卻不提供替代焦點指示器。 只寫 outline-none 把預設焦點框拿掉、又沒補上 ring 或 outline，鍵盤使用者會完全看不到焦點在哪，這是嚴重的無障礙問題。根治法：移除預設輪廓時必補替代焦點環，並優先用 focus-visible:（只在鍵盤導覽時顯示，滑鼠點擊不觸發）。

<!-- ❌ 拿掉焦點框卻沒補替代，鍵盤用戶迷路 -->
<button class="outline-none">按鈕</button>

<!-- ✅ 用 focus-visible 補上焦點環 -->
<button class="outline-none focus-visible:ring-2 focus-visible:ring-blue-500">按鈕</button>

坑四：有圓角的容器忘了 overflow-hidden，子元素方角穿透。 父容器加了 rounded-xl，但裡面的圖片或色塊仍是方角，四個角會「衝出」父容器的圓角。根治法：有圓角又有滿版子元素的容器，一律加 overflow-hidden，讓子元素被裁切到圓角內。

坑五：對 grid 容器用 divide-y。 divide-* 靠 & > * + * 相鄰選擇器運作，在 display: grid 或絕對定位的子元素上完全無效。根治法：grid 容器改用 gap-px 加背景色模擬分隔線（grid gap-px bg-gray-200 配子元素 bg-white），或改回 flex／block 容器再用 divide。

邊框與圓角最佳實踐清單

• 邊框顏色一律明確指定：v4 預設 currentColor，別依賴預設值，border border-gray-200 才穩定。
• 焦點環寫明寬度並用 focus-visible：focus-visible:ring-2 focus-visible:ring-blue-500，只在鍵盤導覽時顯示，兼顧美觀與無障礙。
• 三選一原則：卡片邊界用 border（佔空間）、焦點與高亮用 ring／outline（不佔空間），別同時用 border 又 outline 製造混亂的雙重邊框。
• 圓角容器配 overflow-hidden：防止子元素方角穿透圓角。
• 善用 v4 inset-ring 做雙描邊：外側 ring-* 配內側 inset-ring-*，做出精緻的內外雙環，取代手寫 box-shadow。
• 邏輯屬性支援 RTL：需要支援從右到左語言時，用 border-s／border-e、rounded-s／rounded-e 取代物理方向 class。
• 記得圓角刻度平移：從 v3 遷移時，單獨的 rounded 要改成 rounded-sm。

小結

這是 TailwindCSS 完整教學 系列的第十七篇，延續 視覺樣式章（TW-4）。上一篇 《背景與漸層》 我們把單一顏色延伸成「面」與「光」，玩轉背景色、漸層與遮罩；而這一篇替每個區塊「描邊、圓角、分隔」，讓版面有了清楚的界線與層次。回顧幾個重點：

• border 三要素：寬度（border／border-2／border-4、單邊 border-t／border-l、邏輯 border-s／border-e）、顏色（v4 預設 currentColor，務必明確指定）、樣式（border-solid／border-dashed／border-dotted）。
• rounded 圓角：rounded-sm（v3 的 rounded）～rounded-3xl、rounded-4xl（v4 新增）、各角 rounded-tl／rounded-bl、膠囊 rounded-full。
• 不佔空間的邊界：ring-*（v4 預設 1px，v3 是 3px）、v4 全新 inset-ring-* 內側環、outline-* 輪廓，三者都畫在元素外／內緣、不撐大元素。
• divide 分隔線：divide-y（水平線）、divide-x（垂直線）自動在相鄰子元素間畫線，只適用 flex／block 容器。
• v3 → v4 差異：border 預設色改 currentColor、ring 預設 1px、inset-ring-* 新增、圓角刻度整體平移。

輪廓有了，元素之間開始有俐落的界線與層次。但目前的版面還是「平」的——缺少深淺、遠近的立體感。接下來我們替元素加上「光影」，讓區塊從畫面浮起來。下一篇 《陰影與效果》 會帶你掌握 shadow-* 陰影、opacity 透明度、blur／brightness 等濾鏡效果，替版面加上最後一層質感。