CSSのborder-widthプロパティは、要素の枠線の幅を指定するために使用されます。数値（ピクセルやemなど）やキーワード（thin、medium、thick）を使って枠線の太さを調整できます。
INDEX
border-widthプロパティの値とその効果の一覧
1px– 枠線の幅を1pxに設定します。非常に細い枠線。5px– 枠線の幅を5pxに設定します。中程度の枠線。10px– 枠線の幅を10pxに設定します。太い枠線。medium– デフォルトの中間サイズの枠線。thick– 太めの枠線。
注意点や関連情報
border-widthプロパティは、枠線のスタイルを指定しないと表示されませんので、border-styleプロパティを併用して設定する必要があります。また、太すぎる枠線はレイアウトを崩す可能性があるため、デザインに合わせて適切な幅を選びましょう。
border-widthが効かない理由として考えられること
border-styleが設定されていない
border-widthはボーダーの幅を設定するプロパティですが、border-styleが設定されていないとボーダーが表示されません。デフォルトではborder-styleがnoneになっているため、border-widthを設定しても効果が見えないことがあります。
対策：border-styleをsolid、dashed、dottedなど、適切なスタイルに設定します。例えば、border-style: solid;と指定します。
要素のborder-colorがtransparentに設定されている
ボーダーの幅が設定されていても、border-colorがtransparentや背景色と同じ場合、ボーダーが視覚的に見えなくなります。
対策：border-colorが適切に設定されているか確認し、視認可能な色を指定します。
共通するCSSコード
.css-sample-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 20px 0;
text-align: center;
}
.css-sample-item {
width: 300px;
padding: 20px;
margin: 10px 0;
text-align: center;
}
border-width: 1px;
非常に細い1pxの枠線です。
HTMLコード
<div class="css-sample-container css-sample-border-width-1px">
<div class="css-sample-item">1px Border</div>
</div>
CSSコード
.css-sample-border-width-1px {
border: 1px solid #99ccff;
}
表示結果
1px Border
border-width: 5px;
中程度の5pxの枠線です。
HTMLコード
<div class="css-sample-container css-sample-border-width-5px">
<div class="css-sample-item">5px Border</div>
</div>
CSSコード
.css-sample-border-width-5px {
border: 5px solid #99ccff;
}
表示結果
5px Border
border-width: 10px;
非常に太い10pxの枠線です。
HTMLコード
<div class="css-sample-container css-sample-border-width-10px">
<div class="css-sample-item">10px Border</div>
</div>
CSSコード
.css-sample-border-width-10px {
border: 10px solid #99ccff;
}
表示結果
10px Border
border-width: medium;
デフォルトの中間サイズの枠線です。
HTMLコード
<div class="css-sample-container css-sample-border-width-medium">
<div class="css-sample-item">Medium Border</div>
</div>
CSSコード
.css-sample-border-width-medium {
border-width: medium;
border-style: solid;
border-color: #99ccff;
}
表示結果
Medium Border
border-width: thick;
太めの枠線です。強調したい要素に使います。
HTMLコード
<div class="css-sample-container css-sample-border-width-thick">
<div class="css-sample-item">Thick Border</div>
</div>
CSSコード
.css-sample-border-width-thick {
border-width: thick;
border-style: solid;
border-color: #99ccff;
}
表示結果
Thick Border
まとめ
border-widthプロパティは、枠線の幅を指定するために使用されます。- ピクセル値やキーワード（
thin,medium,thick）を使用して、幅を調整できます。 - 枠線の幅が太すぎると、要素のレイアウトに影響を与えることがあるため、デザインに合わせて調整が必要です。