border
は CSS の 一括指定プロパティで、要素の境界を設定します。これは border-width
, border-style
, border-color
の値を設定します。
例
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* 種類 */
border: solid;
/* 幅 | 種類 */
border: 2px dotted;
/* 種類 | 色 */
border: outset #f33;
/* 幅 | 種類 | 色 */
border: medium dashed green;
/* グローバル値 */
border: inherit;
border: initial;
border: unset;
border
プロパティは、以下に挙げる値の1~3つを使用して指定します。値の順序は関係ありません。
注: style が指定されていない場合は境界線は表示されません。 style の既定値が none
だからです。
値
<line-width>
- 境界線の太さを設定します。指定されなかった場合は既定値の
medium
になります。border-width
を参照してください。 <line-style>
- 境界線の種類を設定します。指定されなかった場合は既定値の
none
になります。border-style
を参照してください。 <color>
- 境界線の色を設定します。指定されなかった場合は既定値で要素の
color
プロパティになります。border-color
を参照してください。
解説
他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 border
は border-image
のカスタム値を指定することができず、初期値、つまり none
に設定します。
border
による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の border-width
、 border-style
、 border-color
プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 (border-top
など) や論理的 (border-block-start
など) な境界線プロパティを使用することもできます。
境界線と輪郭線
境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。
- 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。
- 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。
公式定義
形式文法
<line-width> || <line-style> || <color>ここで
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>ここで
<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>? )ここで
<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> とした。実質的な影響はない。一括指定を使用してカスタム値を設定することはできないため、 border は border-image を初期値 (none ) にリセットするようになった。 |
CSS Level 2 (Revision 1) border の定義 |
勧告 | inherit キーワードを受け付けるようになった。また、transparent を有効な色として受けつけるようになった。 |
CSS Level 1 border の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser