CSS プロパティ border-bottom-width

CSSプロパティborder-bottom-width：要素の下枠線の幅を設定する

CSSプロパティ border-bottom-width：要素の下枠線の幅を設定する

border-bottom-width プロパティは、要素の**下枠線の幅**を設定するために使用されます。 このプロパティは、ピクセル (px)、em、rem、パーセンテージ (%)、またはCSSキーワードなど、さまざまな単位で設定できます。

構文


border-bottom-width: medium | thin | thick | <length>;

値

  • medium: デフォルト値。中程度の幅の枠線を定義します。
  • thin: 細い枠線を定義します。
  • thick: 太い枠線を定義します。
  • <length>: 具体的な数値を使用して枠線の幅を定義します。たとえば、10px や 0.5em などです。一般的なCSSの長さ単位を使用できます。

使用例

以下の例は、border-bottom-width プロパティを使用して、さまざまな幅の下枠線を作成する方法を示しています。 


<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  padding: 20px;
  margin-bottom: 10px;
  border-style: solid; /* 枠線のスタイルを設定する必要がある */
}

.thin {
  border-bottom-width: thin;
}

.medium {
  border-bottom-width: medium;
}

.thick {
  border-bottom-width: thick;
}

.custom {
  border-bottom-width: 5px;
}
</style>
</head>
<body>

<div class="box thin">細い下枠線</div>
<div class="box medium">中程度の下枠線</div>
<div class="box thick">太い下枠線</div>
<div class="box custom">カスタム幅 (5px) の下枠線</div>

</body>
</html>

このコードを実行すると、4つの異なる幅の下枠線を持つボックスが表示されます。

注意点

  • border-bottom-width プロパティは、枠線の幅のみを設定し、枠線の色やスタイルには影響しません。完全な枠線のスタイルを設定するには、border-bottom ショートハンドプロパティを使用するか、border-bottom-style と border-bottom-color を個別に設定する必要があります。
  • border-bottom-style が設定されていない場合、border-bottom-width は機能しません。
  • border-bottom-width プロパティは、すべてのHTML要素に適用できます。

関連プロパティ

  • border-width
  • border-style
  • border-color
  • border-top-width
  • border-right-width
  • border-left-width

ブラウザの互換性

border-bottom-width プロパティは、優れたブラウザ互換性を備えており、すべての主要なブラウザでサポートされています。

ブラウザ バージョン
Chrome 1.0以降
Firefox 1.0以降
Safari 3.0以降
Internet Explorer 4.0以降
Edge 12.0以降
Opera 7.0以降

参考文献

  • <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-width">border-bottom-width - CSS | MDN</a>
  • <a href="http://www.runoob.com/cssref/pr-border-bottom-width.html">CSS border-bottom-width 属性 | 菜鸟教程</a>

よくある質問

Q1: border-bottom-width を設定しても枠線が表示されません。

A1: border-bottom-style プロパティで枠線のスタイルを設定する必要があります。スタイルが設定されていない場合、枠線は表示されません。

Q2: border-bottom-width の値にパーセンテージを使用できますか？

A2: いいえ、border-bottom-width の値にパーセンテージを使用することはできません。ピクセル、em、remなどの固定単位を使用する必要があります。

Q3: border-bottom-width は、すべての要素で同じように機能しますか？

A3: はい、border-bottom-width は、すべてのHTML要素で同じように機能します。ただし、一部の要素では、デフォルトのスタイルシートによって枠線の表示が異なる場合があります。