使用頻度の高いテクニックなので、初心者の方は覚えておきましょう。

１．border: none; で消す

まずはborder:none;を使った方法を紹介。

やり方はとても簡単で、消したい部分をborder-〇〇で指定し、値をnoneにするだけです。これで該当する箇所の線のみを消すことが出来ます。

試しに左右のボーダーのみを消してみると…

See the Pen border_del_1 by Leo_8192 (@Leo_8192) on CodePen.

こんな感じです。

２．transparent で透明にする

厳密には消している訳ではないんですが、こういう方法もあります。

これもやり方は簡単で、消したい部分をborder-〇〇で指定し、色をtransparentにするだけでOKです。あ、線幅と線のスタイルはしっかり記述してくださいね。

先程のborder:none;を使う方法と違い、透明とはいえ線自体は存在しているので連結部分の表示が異なります。

See the Pen border_del_1 by Leo_8192 (@Leo_8192) on CodePen.

要素の背景色を被せたくない場合は、背景の適用範囲を線の内側に指定するbackground-clip:padding-box;を追加で記述しましょう。

See the Pen border_del_2 by Leo_8192 (@Leo_8192) on CodePen.

はい、これで線が消えました。これを上手く使うとCSSのみで三角形や台形を作ることが出来るので、知らなかったという人は値を色々変えてみて挙動をチェックしてみましょう。

また、border-radiusなど他のプロパティも絡めれば扇形なども作れるので、理解が深まればCSSのみで大抵の形は作れるようになります。

使い分けについて

今回紹介した2つの手法の使い分けですが、どっちを使うのが正解！とかはありませんので、連結部分をどう表示したいかで決めましょう。

もちろん、2つの手法を組み合わせてもOK。

See the Pen border_del_3 by Leo_8192 (@Leo_8192) on CodePen.

使い道は無さそうですが…