ドキュメントブログショーケースPlus
  1. ボーダー
  2. border-color

ボーダー

border-color

要素のボーダーの色を制御するためのユーティリティ。

クラススタイル
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) */

例

基本的な例

要素のボーダーカラーを制御するには、border-rose-500 や border-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>

不透明度を変更する

要素のボーダーカラーの不透明度を制御するには、カラー不透明度モディファイアーを使用します。

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>

個別の辺

要素の片側のボーダーカラーを設定するには、border-t-indigo-500 や border-r-lime-100 のようなユーティリティを使用します。

ボーダー上-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>

水平および垂直方向の辺

要素の2辺のボーダーカラーを同時に設定するには、border-x-indigo-500 や border-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>

論理プロパティの使用

テキストの方向に基いて左または右のボーダーにマッピングされる border-inline-start-color および border-inline-end-color 論理プロパティ を設定するには、border-s-indigo-500 や border-e-lime-100 のようなユーティリティを使用します。

左から右

右から左

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

子要素間の区切り線

子要素間のボーダーカラーを制御するには、divide-indigo-500 や divide-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>

カスタム値の使用

次の border-[<value>] 構文 を設定するためのボーダーカラー完全にカスタム値に基づいて

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

CSS変数には、次のものも使用できます border-(<custom-property>) 構文

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

これは単なる省略形です border-[var(<custom-property>)] これは自動的に var() 関数を追加します。

フォーカス時の適用

プレフィックスa border-color ユーティリティを次のようなバリアントで focus:* は、その状態でのみユーティリティを適用します。

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

バリアントのドキュメント で、バリアントの使用方法について詳しく学んでください。

レスポンシブデザイン

プレフィックスa border-color ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上のみです

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

バリアントのドキュメント で、バリアントの使用方法について詳しく学んでください。

テーマのカスタマイズ

--color-* テーマ変数を使用して、次のものをカスタマイズしますcolor プロジェクト内のユーティリティ

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

これで、 border-regal-blue ユーティリティをマークアップで使用できます

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

テーマのカスタマイズの詳細については、以下を参照してください テーマのドキュメント.

このページ内

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー