← カテゴリ一覧に戻る

枠線（border）

borderborder-styleborder-colorborder-widthoutline

borderはレイアウトに影響する枠線です。shorthand構文で幅・スタイル・色を一括指定できます。個別の辺（top/right/bottom/left）への指定や、最新の論理プロパティ（block/inline）も利用できます。

デモ：border-style のバリエーション

solid
dashed
dotted
double
groove
ridge
inset
outset

デモ：個別の辺・太さ・色の組み合わせ

border-top のみ
border-left（アクセント）
border-bottom のみ
上下のみ
mixed（カード風）
グラデーションボーダー

デモ：outline（レイアウトに影響しない枠線）

outline（余白に影響しない）
outline-offset: -2px（内側）

コード例

/* shorthand: width style color */
.border-basic { border: 2px solid #3b82f6; }
.border-dashed { border: 2px dashed #6366f1; }

/* 個別の辺 */
.border-top    { border-top: 4px solid #ef4444; }
.border-left   { border-left: 6px solid #8b5cf6; }

/* 個別プロパティ */
.card {
  border-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}

/* グラデーションボーダー（background hack） */
.gradient-border {
  border: 2px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
}

/* outline: フォーカスリングやデバッグに */
button:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

/* 論理プロパティ（新しい記法）*/
.card-logic {
  border-block: 1px solid #e5e7eb;   /* 上下 */
  border-inline: none;                /* 左右なし */
  border-inline-start: 4px solid #3b82f6; /* 開始辺 */
}

比較：border vs outline

観点borderoutline
レイアウトへの影響⚠️ スペースを占有する（box modelの一部）✅ スペースを占有しない
個別の辺への指定✅ 各辺を個別に設定可能❌ 全辺一括のみ
border-radius連動✅ border-radiusに追従する⚠️ 一部ブラウザのみ追従（outline-radius未標準）
outline-offset❌ なし✅ 外側・内側にオフセット可能
主な用途カードの枠、区切り線、デザイン要素フォーカスリング、デバッグ用枠（* {outline: 1px solid red}）

NEW論理プロパティ（border-block / border-inline）

論理プロパティは書字方向（横書き・縦書き・RTL）に依存しない辺の指定です。国際化対応のサイトで重要です。border-blockは上下方向、border-inlineは左右（書字方向）に対応します。

border-block（上下）
border-inline（左右）
border-inline-start（開始辺）
/* 論理プロパティ: 書字方向に依存しない指定 */
.section-divider {
  border-block-end: 1px solid #e5e7eb; /* = border-bottom (横書き時) */
}

.sidebar-item {
  border-inline-start: 4px solid #3b82f6; /* = border-left (LTR時) */
  /* RTL言語では自動的に border-right になる */
}

/* 対応する物理プロパティとの対応 */
/* border-block-start  ≒ border-top    */
/* border-block-end    ≒ border-bottom */
/* border-inline-start ≒ border-left   */
/* border-inline-end   ≒ border-right  */

🤖 AIプロンプトテンプレート

CSSのborderプロパティを使った枠線デザインの実装例をReact + Tailwind CSSで作成してください。

要件:
- border-style の比較: solid / dashed / dotted / double / groove / ridge / inset / outset / none
- border-width の違い（1px / 2px / 4px / 8px）の視覚的比較
- border-color にHEX・RGB・CSS変数を使った例
- 上下左右個別指定（border-top / border-right / border-bottom / border-left）
- ショートハンド（border: 2px solid #333）の書き方
- カード・入力フォーム・区切り線など実際のUIへの応用例

各スタイルの違いを一覧で視覚的に比較できるデモにしてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo