border

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

• border-width
• border-style
• border-color

/* 種類 */
border: solid;

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

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

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

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

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

<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 など) な境界線プロパティを使用することもできます。

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

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

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  

HTML

<div>ここには境界線、概要、ボックスシャドウがあります！すごいと思いませんか？</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;
}

結果

• border-width
• border-style
• border-color
• outline
• 背景と境界
• CSS の学習: 背景と境界