ホームへ

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

上下だけに線を引きたい

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

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

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

border上下だけ

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

border上だけ

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

border下だけ

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: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で上だけ、下だけ、上下だけに線を引く方法でした

マンガで読める関連記事