Borders

border-color

用於控制元素邊框顏色的通用類別。

ClassStyles
border-inherit
border-color: inherit;
border-current
border-color: currentColor;
border-transparent
border-color: transparent;
border-black
border-color: var(--color-black); /* #000 */
border-white
border-color: var(--color-white); /* #fff */
border-red-50
border-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
border-red-100
border-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
border-red-200
border-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
border-red-300
border-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
border-red-400
border-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */

範例(Examples)

基本範例(Basic example)

使用 border-rose-500border-lime-100 等通用類別來控制元素的邊框顏色:

border-indigo-500

border-purple-500

border-sky-500

<div class="border-4 border-indigo-500 ..."></div><div class="border-4 border-purple-500 ..."></div><div class="border-4 border-sky-500 ..."></div>

變更透明度(Changing the opacity)

使用顏色透明度修飾符來控制元素邊框顏色的透明度:

border-indigo-500/100

border-indigo-500/75

border-indigo-500/50

<div class="border-4 border-indigo-500/100 ..."></div><div class="border-4 border-indigo-500/75 ..."></div><div class="border-4 border-indigo-500/50 ..."></div>

單邊設定(Individual sides)

使用 border-t-indigo-500border-r-lime-100 等通用類別來設定元素某一邊的邊框顏色:

border-t-indigo-500

border-r-indigo-500

border-b-indigo-500

border-l-indigo-500

<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>

水平和垂直邊(Horizontal and vertical sides)

使用 border-x-indigo-500border-y-lime-100 等通用類別同時設定元素兩邊的邊框顏色:

border-x-indigo-500

border-y-indigo-500

<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>

使用邏輯屬性(Using logical properties)

使用 border-s-indigo-500border-e-lime-100 等通用類別來設定 border-inline-start-colorborder-inline-end-color 邏輯屬性,這些屬性會根據文字方向對應到左邊或右邊的邊框:

Left-to-right

Right-to-left

<div dir="ltr">  <div class="border-s-indigo-500 ..."></div></div><div dir="rtl">  <div class="border-s-indigo-500 ..."></div></div>

子元素之間的分隔線(Divider between children)

使用 divide-indigo-500divide-lime-100 等通用類別來控制子元素之間的邊框顏色:

01
02
03
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">  <div>01</div>  <div>02</div>  <div>03</div></div>

使用自訂值(Using a custom value)

使用 border-[<value>] 語法,根據完全自訂的值來設定 border color

<div class="border-[#243c5a] ...">  <!-- ... --></div>

對於 CSS 變數,你也可以使用 border-(<custom-property>) 語法:

<div class="border-(--my-border) ...">  <!-- ... --></div>

這只是 border-[var(<custom-property>)] 的簡寫形式,會自動為你加上 var() 函式。

在 focus 時套用(Applying on focus)

border-color 通用類別前面加上像 focus:* 這樣的變體,讓該通用類別只在該狀態下套用:

<input class="border-2 border-gray-700 focus:border-pink-600 ..." />

變體文件中了解更多關於使用變體的資訊。

響應式設計(Responsive design)

border-color 通用類別前面加上像 md: 這樣的中斷點變體,讓該通用類別只在中型螢幕尺寸及以上時套用:

<div class="border-blue-500 md:border-green-500 ...">  <!-- ... --></div>

變體文件中了解更多關於使用變體的資訊。

自訂你的主題(Customizing your theme)

使用 --color-* 主題變數來自訂專案中的 color 通用類別:

@theme {  --color-regal-blue: #243c5a; }

現在可以在標記中使用 border-regal-blue 通用類別:

<div class="border-regal-blue">  <!-- ... --></div>

主題文件中了解更多關於自訂主題的資訊。

Copyright © 2026 Tailwind Labs Inc.·商標政策(Brand)