【CSS入門】境界線を引く方法

2022年2月6日2022年2月8日 souki202

要素に対して境界線を付けたり、角丸にできたりします。

例えば画像の表示を角丸にする、うっすら境界線をつけて悪目立ちしないように区別しやすくする、といった様々な用途に利用できます。

1 border
2 角丸にする
- 2.1 四隅の角丸度合いを指定
3 まとめ

border

要素に対して境界線を引くにはborderプロパティを用い、幅、種類、色、位置が指定できます。

See the Pen css border by Totori (@souki202) on CodePen.

例えば、

tipについての領域

の左側にある青い線もborderで出力しています。(“!”マークは::beforeとborder-radiusを利用しています)

指定方法は、1つのプロパティで一括指定する方法と、それぞれ個別で指定する方法があります。

個別に指定

個別に指定する場合、border-xxとなっているプロパティを用います。

border-width

境界線の太さを指定します。単位はpx、emなど、%以外は通常と同じものが利用できます。

デフォルトはmediumですが、実際の太さが分かりづらいので普通に指定することをおすすめします。

See the Pen css border-width by Totori (@souki202) on CodePen.

medium以外にも、thin、medium、thickなどがあります。

border-color

色を指定します. #xxxxxxのような16進数表記、rgba(r, g, b, a)の指定などが可能です。

デフォルトは黒です

See the Pen css border-color by Totori (@souki202) on CodePen.

border-style

8種類がありますが、基本的にモダンなWebサイトではsolid以外ほとんど利用しないと思います。昔の個人ブログのようなサイトでは様々なstyleが利用されていました。

See the Pen css border-style by Totori (@souki202) on CodePen.

一括指定

borderプロパティを利用する場合、スペース区切りでborder: 幅種類色と書くことで一括指定できます。

See the Pen css border batch by Totori (@souki202) on CodePen.

各方向個別で指定

一部の例で先行して出しましたが、border-left-widthやborder-bottom-styleのように、border-の後に方向を付けると、その方向だけを指定できます。

一括指定の場合は単にborder-leftのようにします。

また、スペース区切りで書くことで、一括指定できます。

p {
    border-width: 1px 2px 3px 4px; /* 上 右 下 左 */
    border-color: red blue #66ff66; /* 上 左右 下 */
    border-style: dotted solid; /* 上下 左右 */

    border-left-width: 3px; /* 左の線を幅指定 */
    border-top-width: 0; /* 上は境界線なし */
}

同様に、border-left-style, border-bottom-colorのように、styleや色も方向ごとに指定できます。

また、後に書かれたものほど優先されることを利用して、特定方向だけ上書きする、といった使い方もアリです。

p {
    border-width: 4px; /* まず全部4pxにする */
    border-bottom-width: 0; /* 下方向だけ0で上書きする */
}

角丸にする

一見境界線と関係ないように見えますが、プロパティ名がborder-radiusです。

四隅の角丸度合いを指定

border-radiusを使用します。

See the Pen css border-radius by Totori (@souki202) on CodePen.

他のborder系プロパティと同様に、四隅それぞれ指定が可能です。

p {
    border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
    border-radius: 10px 20px 30px; /* 左上 右上+左下 右下 */
    border-radius: 10px 20px; /* 左上+右下 左下+右上 */
}

また、上の例を見ると、背景は角丸にしても飛び出さないことがわかります。background-imageを利用して画像にしても同様です。

子要素に画像がある場合などは角が飛び出す場合があるので、overflow: hidden;を付けることをおすすめします。