border

borderCSS一括指定プロパティで、要素の境界を設定します。これは border-width, border-style, border-color の値を設定します。

試してみましょう

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

/* 種類 */
border: solid;

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

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

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

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

border プロパティは、以下に挙げる値の 1 ~ 3 つを使用して指定します。値の順序は関係ありません。

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

<line-width>

境界線の太さを設定します。指定されなかった場合は既定値の medium になります。 border-width を参照してください。

<line-style>

境界線の種類を設定します。指定されなかった場合は既定値の none になります。 border-style を参照してください。

<color>

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

解説

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

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

境界線と輪郭線

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

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

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

border = 
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>

<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>

<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )

<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<cmyk-component> =
<number> |
<percentage>

<alpha-value> =
<number> |
<percentage>

<hue> =
<number> |
<angle> |
none

<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>

<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> =
<xyz-space> [ <number> | none ]{3}

<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020

<xyz-space> =
xyz |
xyz-d50 |
xyz-d65

ピンク色の出っ張った境界の設定

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;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 4
# propdef-border

ブラウザーの互換性

BCD tables only load in the browser

関連情報