ホーム(記事一覧)へ

CSSで上下のborderを指定する方法

タイトルタグなどでは上下のborderをきれいに装飾していることがよくあります。

でも、あれってどうやるの?

そんな「CSSで上下のborderを指定する方法」を説明します。

完成イメージ

テキスト

html

<div class="border-topbottom">
    テキスト
</div>

CSS

.border-topbottom{
    padding: 10px 20px;
    border-top: 1px solid #AAA;
    border-bottom: 3px dashed #333;
}

border-topでは上線を、border-bottomでは下線をそれぞれ指定しています。線の幅・形・色もそれぞれ指定できます。

上下同じデザインにしたいときは、上下同じ指定をすればOKです。

まとめ

CSSでは上線と下線をそれぞれ指定できます。

以上、CSSで上下のborderを指定する方法でした。

関連記事