【CSS】borderで上だけ、下だけ、上下だけに線を引く方法

borderを指定すると上下左右すべてに線を引いてしまう。上下だけに線を引くにはどうしたらいいの!?

そんな疑問にお答えすべく、borderで上だけ、下だけ、上下だけに線を引く方法を解説します。

結論：border-topとborder-bottomを指定

border上下だけ

<style>
.border{
    /*コレ*/border-top: 3px solid #333;
    /*コレ*/border-bottom: 3px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="border">borderで上下だけに線を引く</div>

border上だけ

<style>
.border-top{
    /*コレ*/border-top: 3px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="border-top">borderで上だけに線を引く</div>

border下だけ

<style>
.border-bottom{
    /*コレ*/border-bottom: 3px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="border-bottom">borderで下だけに線を引く</div>

以下で詳しく解説します。

基本：borderを指定すると上下左右すべてに線を引く

border:3px solid #333;のように指定すると要素の周りに線を引くことができます。

値はそれぞれ線の幅、線のデザイン、線の色です。

（border-width border-style border-color）

これがborderの基本形です。

borderの基本について詳しくはこちら↓

基本：borderは上下左右それぞれ指定できる

border-top: 3px solid #333;
border-right: 3px solid #333;
border-bottom: 3px solid #333;
border-left: 3px solid #333;

上線：border-top
右線：border-right
下線：border-bottom
左線：border-left

これらを使うと任意の箇所の線を指定できます。

borderを指定せず、border-topだけ指定すると上線だけ、border-bottomだけ指定すると下線だけ、両方を指定すると上下の線を引くことができます。

当然border-rightとborder-leftだけ指定すると左右の線を引くことができます。

応用：上下それぞれちがうデザインも可能

<style>
.border3{
    border-top: 2px dashed #333;
    border-bottom:5px double red;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="border3">上下違うデザインの線</div>

線幅、スタイル、色は上下左右それぞれで指定できます。

borderがデフォルトで存在するタグの場合

テキストボックスなどはデフォルトで線が引かれています。

この場合いったん線を消してから加えたい線を指定します。

↓

<style>
.border4{
    /*コレ*/border: none;
    border-top: 3px solid #333;
    border-bottom: 3px solid #333;
    padding: 10px;
    background: #f2f2f2;
    display: block;
    margin-bottom: 10px;
}
</style>
<input type="text" value="デフォルトテキストボックス"><br>
↓<br>
<input class="border4" type="text" value="borderをいったん消す">

border:none（またはborder:0）を指定すると線が消えます。

その後にborder-topとborder-bottomを指定します。

もちろんborder-rightとborder-leftの線を消す、という指定でもOKですが、1行減らせるのでboder:noneを指定しました。

この場合順番が重要でborder:noneを後に指定するとborder-topとborder-bottomが上書きされ全部の線が消えてしまうので要注意です。

まとめ

• borderで上下だけに線を引くにはborder-topとborder-bottomを指定する
• テキストボックスなどborderがデフォルトで存在するタグの場合はborder:noneで消してからborder-topとborder-bottomを指定する

以上、CSS borderで上だけ、下だけ、上下だけに線を引く方法でした