CSS borderの解除方法
「borderの一部を解除して線のない状態にしたい！」
CSS borderの解除方法を解説します。
なお、border-leftやborder-topなど方向を指定した場合でも方法は同じです。
borderの基本はこちら↓
目次
【方法1】border:none
borderにおける「none」は線の種類（border-style）を「なし」にする状態です。
これを指定すると線の太さ（border-width）に関わらずborderを解除、消すことができます。
<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を解除、消すことができます。
<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の基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
