マンガでわかるホームページ作成

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

上下だけに線を引きたい

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を指定すると上下左右すべてに線を引く

border:3px solid #333;

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

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

(border-width border-style border-color)

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

関連記事