borderの横方向・縦方向の指定ができるborder-inline、border-blockプロパティについて【CSS】

以前、インライン方向・ブロック方向(横・縦方向)の指定が出来るプロパティとしてpaddingやmarginを解説しましたが、borderプロパティにも指定出来るのをすっかり忘れていました。
やり慣れた方法ばかりですっかり見落としていましたので、改めて解説していきたいと思います。

paddingやmarginのインライン方向・ブロック方向の指定については以下をご覧ください。
・margin-inline: auto;が意外と便利！ブロック要素の左右中央揃えに使えるプロパティ【CSS】
・余白指定を効率的にできるpadding-inline/padding-blockプロパティについて【CSS】

borderプロパティについて

borderプロパティは要素の枠線を指定する事が出来るプロパティで、Webデザインでは不可欠なプロパティとなります。指定方法は以下のようになります。

.box {
    /* 線の太さ */
    border-width: 1px;
    /* 線の種類 */
    border-style: solid;
    /* 線の色 */
    border-color: #000;

    /* ショートハンド(上下左右) */
    border: 1px solid #000;

    /* 上だけ */
    border-top: 1px solid #000;
    /* 下だけ */
    border-bottom: 1px solid #000;
    /* 左だけ */
    border-left: 1px solid #000;
    /* 右だけ */
    border-right: 1px solid #000;
}

上記のように、全方向・上下左右別・線の太さ・種類・色の指定が可能です。

border-inline、border-blockプロパティについて

枠線を指定する際に、全方向や下だけ、上だけの他に上下のみや左右のみの指定も多いかと思います。
そんな時に便利なborder-inline、border-blockプロパティを解説していきます。詳しい使い方は以下のようになります。

border-inline

インライン方向(横書きの場合は左右)の枠線を指定できます。
※縦書きの場合は上下になります。

/* インライン方向(横書きの場合：左右) */
.box {
    /* ショートハンド(左右) */
    border-inline: 1px solid #000;

    /* 左のみ */
    border-inline-start: 1px solid #000;
    /* 右のみ */
    border-inline-end: 1px solid #000;
}

border-block

ブロック方向(横書きの場合は上下)の枠線を指定できます。
※縦書きの場合は左右になります。

/* ブロック方向(横書きの場合：上下) */
.box {
    /* ショートハンド(上下) */
    border-block: 1px solid #000;

    /* 上のみ */
    border-block-start: 1px solid #000;
    /* 下のみ */
    border-block-end: 1px solid #000;
}

上記のように、これまで左右だとborder-leftとborder-rightを別々に記載していたりしたものが1行で済んだりしますので、手間がかなり解消されます。
枠線の太さや色なども個別に指定が可能となっています。

さいごに

いかがでしたでしょうか。
今回は、borderの横方向・縦方向の指定ができるborder-inline、border-blockプロパティについて解説しました。
paddingやmarginでもあるのに、何で今まで気にしなかったのか慣れというのは怖いなぁと感じた瞬間でした。他にもいくつかインライン方向・ブロック方向の指定が出来るプロパティがありますので、また後日紹介していきたいと思います。