CSS `border-bottom-width` プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

border-bottom-width は CSS のプロパティで、ボックスの下の境界の幅を設定します。

試してみましょう

border-bottom-width: thick;

border-bottom-width: 2em;

border-bottom-width: 4px;

border-bottom-width: 2ex;

border-bottom-width: 0;

<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element">
 これはボックスと、それを囲む境界線です。
 </div>
</section>

#example-element {
 background-color: palegreen;
 color: black;
 border: 0 solid crimson;
 padding: 0.75em;
 width: 80%;
 height: 100px;
}

構文

css

/* キーワード値 */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* <length> 値 */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* グローバルキーワード */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: revert;
border-bottom-width: revert-layer;
border-bottom-width: unset;

値

<line-width>

境界の幅を、明示的な非負の <length> またはキーワードで定義します。キーワードの場合、以下の値のいずれかでなければなりません。

thin
- 1px と同じです。
medium
- 3px と同じです。
thick
- 5px と同じです。

公式定義

初期値	`medium`
適用対象	すべての要素。 `::first-letter` にも適用されます。
継承	なし
計算値	絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
アニメーションの種類	length

形式文法

border-bottom-width = 
 <line-width> 

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

例

下境界の太さの比較

HTML

html

<div>要素 1</div>
<div>要素 2</div>

CSS

css

div {
 border: 1px solid red;
 margin: 1em 0;
}
div:nth-child(1) {
 border-bottom-width: thick;
}
div:nth-child(2) {
 border-bottom-width: 2em;
}

結果

[フレーム]

仕様書

仕様書
CSS Backgrounds and Borders Module Level 3 # border-width

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年6月30日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS border-bottom-width プロパティ

HTML

CSS

結果

MDN の改良に協力

CSS `border-bottom-width` プロパティ