【CSS】border-width - 境界線の太さ

CSSのborder-widthプロパティについて解説します。

検証環境

CSS

macOS

14.1

border-width

border-widthは“境界線の太さ”のプロパティです。

上下左右の境界線の太さを一括で設定します。

個別に設定するには、border-top-width、border-bottom-width、border-left-width、border-right-widthを使用します。

【CSS】border-top-width - 境界線（上）の太さ

【CSS】border-bottom-width - 境界線（下）の太さ

【CSS】border-left-width - 境界線（左）の太さ

【CSS】border-right-width - 境界線（右）の太さ

基本構文

４パターンの基本的な構文があり、それぞれ値の個数が異なります。。

全て（値：１個）

値が１つの場合、全て（上下左右）の境界線に適用します。

border-width: 値;

上下・左右（値：２個）

値が２つの場合、値1は上下、値2は左右の境界線に適用します。

border-width: 値1 値2;

上・左右・下（値：３個）

値が３つの場合、値1は上、値2は左右、値3は下の境界線に適用します。

border-width: 値1 値2 値3;

上・右・下・左（値：４個）

値が４つの場合、値1は上、値2は右、値3は下、値4は左の境界線に適用します。

border-width: 値1 値2 値3 値4;

サンプル

全て

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-width: 5px;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

上下・左右

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-width: 5px 15px;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

上・左右・下

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-width: 5px 15px 45px;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

上・右・下・左

sample.html

<style>
p {
    border-style: solid;
    ___ih_hl_start
    border-width: 5px 15px 45px 135px;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー