CSS borderで一部の線を消す方法

borderを指定すると上下左右すべてに線を引いてしまう。そのうち一部の線を消すにはどうしたらいいの!?

そんな疑問にお答えすべく、CSS borderで一部を消す方法を解説します。

borderの基本はこちら↓

結論：border-○○:noneを指定

<style>
.border{
    border: 3px solid #333;
    /*コレ*/border-top: none;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="border">border-top:none</div>

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

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

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で一部を消す方法

<style>
.border{
    border: 3px solid #333;
    /*コレ*/border-top: none;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="border">border-top:none</div>

まずborderで上下左右の線を指定します。

その後に消したい方向の線のスタイルをnoneにします。

前に指定してしまうと優先度が負けてしまいCSSの指定が無視されてしまうためです。

上の線を消したいのであれば

border-top: none（またはborder-top: 0）を指定します。

CSSは後述された方が優先されるという特徴がありますので、上書きする指定は後述しましょう。

一方以外を指定するのもアリ

<style>
.border3{
    border-right: 3px solid #333;
    border-bottom: 3px solid #333;
    border-left: 3px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="border3">border-top以外を指定</div>

左下右の線をそれぞれ指定し、上の線を指定しなければ一方の線を消した状態になります。

ただし、先に紹介した書き方より記述が多かったり、修正するとき3箇所直す必要があるのでおススメしません。

まとめ

borderで一部を消すには、borderで全体を指定してから、消したい方向の線をnone指定して消す。

例

border: 3px solid #333;
border-top: none;

以上、CSS borderで一部を消す方法でした