CSSborder プロパティは、境界線に関する個別のプロパティ値(border-width, border-style, border-color)を単一の宣言で設定する一括指定プロパティです。

他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 borderborder-image のカスタム値を指定することができず、初期値、つまり none に設定します。

border による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の border-widthborder-styleborder-color プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的(border-top など)や論理的(border-block-start)な境界線プロパティを使用することもできます。

境界線と輪郭線

境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。

  • 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。
  • 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。

構文

/* 種類 */
border: solid;

/* 幅 | 種類 */
border: 2px dotted;

/* 種類 | 色 */
border: outset #f33;

/* 幅 | 種類 | 色 */
border: medium dashed green;

/* グローバル値 */
border: inherit;
border: initial;
border: unset;

border プロパティは、以下に挙げる値の1~3つを使用して指定します。

メモ: style が指定されていない場合は境界線は表示されません。 style の既定値が none だからです。

<br-width>
境界線の太さを設定します。指定されなかった場合は既定値の medium になります。 border-width を参照してください。
<br-style>
境界線の種類を設定します。指定されなかった場合は既定値の none になります。 border-style を参照してください。
<color>
境界線の色を設定します。指定されなかった場合は既定値で要素の color プロパティになります。 border-color を参照してください。

形式文法

<br-width> || <br-style> || <color>

where
<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

HTML

<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

結果

仕様書

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
border の定義
勧告候補 transparent特別扱いを廃止し、有効な <color> とした。実質的な影響はない。
一括指定を使用してカスタム値を設定することはできないため、 borderborder-image を初期値 (none) にリセットするようになった。
CSS Level 2 (Revision 1)
border の定義
勧告 inherit キーワードを受け付けるようになった。また、transparent を有効な色として受けつけるようになった。
CSS Level 1
border の定義
勧告 初回定義

初期値一括指定の各プロパティとして
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法における値の出現順

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112143.51
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり4 ?1 ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, SphinxKnight, fscholz, ethertank, sosleepy, Yuichiro
最終更新者: mfuji09,