CSSでボーダー(枠線)を消せない

CSSでボーダー(枠線)を消そうと思ってborder: none;と指定しているのにボーダーが消えないとき、ありませんか?F12(開発者ツール)で確認してもちゃんとborder: none;が有効になっているというのに。

犯人はoutline

CSSにはborderの他にoutlineというプロパティがあります。border: none;で枠線を消せないときは、おそらく上位のスタイルシートでoutlineが指定されていると思われます。

outlineはborder同様に、

outline: none;

とすれば消せます。

境界と輪郭

borderは『境界』で、outlineは『輪郭』です。CSSでは「要素に枠線をつける」という同じような挙動をしますが、ちょっと違うところもあります。

borderは他の要素との間に『境界』を設けるので、他の要素を押しのけて枠線を表示しようとします。一方、outlineは単なる輪郭ですので、指定した要素以外の要素に影響を与えることなく枠線を表示します。

フォーカス要素を強調するときなど、動的に枠線を表示したり消したりするような場合は、outlineの方が使い勝手がよいと思われます。

Link