border-bottom

試してみましょう

border-bottom: solid;

border-bottom: dashed red;

border-bottom: 1rem solid;

border-bottom: thick double #32a1ce;

border-bottom: 4mm ridge rgb(211 220 50 / 0.6);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    これは周囲に境界線があるボックスです。
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

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

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

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

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

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

構成要素のプロパティ

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

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

構文

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 = 
  <line-width>  ||
  <line-style>  ||
  <color>       

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

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

例

下の境界の適用

HTML

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

CSS

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

結果

仕様書

ブラウザーの互換性

関連情報

• border
• border-block
• outline