ホームへ

CSS borderの解除方法

2021年07月10日

「borderの一部を解除して線のない状態にしたい!」

CSS borderの解除方法を解説します。

なお、border-leftやborder-topなど方向を指定した場合でも方法は同じです。

borderの基本はこちら↓

【方法1】border:none

borderにおける「none」は線の種類(border-style)を「なし」にする状態です。

これを指定すると線の太さ(border-width)に関わらずborderを解除、消すことができます。

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【方法2】border:0

borderにおける「0」は線の太さ(border-width)を「0」つまり「ない」状態にできます。

これを指定すると線の種類(border-style)に関わらずborderを解除、消すことができます。

border:0
<style>
.example2{
    border: 5px solid #eb0000;
    /*コレ*/border-top:0;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example2">border:0</div>

border:noneとborder:0どちらでもいい

「border:noneでもborder:0でも解除、線を消すことができるならどっちが適切なの?」

どちらでもOKです。好きな方を指定してください。

【方法3】border:initial(IEで効かない)

「initial」はすべてのCSSに指定できる値で、そのCSSを解除・初期値にする値です。

ただし、IEではinitialが効きません

border:noneまたはborder:0を指定したほうが無難でしょう。

【まとめ】borderの解除方法

border:noneまたはborder:0を指定する。どちらでも問題ない。

以上、CSS borderの解除方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ