border-bottom

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

border-bottom は一括指定の CSS のプロパティで、要素の下側の境界のプロパティをすべて設定します。

試してみましょう

border-bottom: solid;

border-bottom: dashed red;

border-bottom: 1rem solid;

border-bottom: thick double #32a1ce;

border-bottom: 4mm ridge rgba(211, 220, 50, 0.6);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #8b008b;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

他の一括指定プロパティと同様に、 border-bottom は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。次のコードを考えてください。

css

border-bottom-style: dotted;
border-bottom: thick green;

これは、実際には以下と同じです。

css

border-bottom-style: dotted;
border-bottom: none thick green;

border-bottom の前で設定された border-bottom-style の値は無視されます。 border-bottom-style の既定値は none なので、 border-style の部分の設定は境界線なしとなります。

構成要素のプロパティ

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

構文

css

border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

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

一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、 1 つまたは 2 つの値を省略することができます。

値

<br-width>: border-bottom-width を参照してください。
<br-style>: border-bottom-style を参照してください。
<color>: border-bottom-color を参照してください。

公式定義

初期値	一括指定の次の各プロパティとして `border-bottom-width`: `medium` `border-bottom-style`: `none` `border-bottom-color`: `currentcolor`
適用対象	すべての要素。 `::first-letter` にも適用されます。
継承	なし
計算値	一括指定の次の各プロパティとして `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0` `border-bottom-style`: 指定通り `border-bottom-color`: 色の計算値
アニメーションの種類	一括指定の次の各プロパティとして `border-bottom-color`: 色 `border-bottom-style`: 離散値 `border-bottom-width`: length

形式文法

border-bottom = 
  <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

html

<div>このボックスには下側に境界線があります。</div>

CSS

css

div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3 # border-shorthands