ホーム(記事一覧)へ

CSS borderが効かない・表示されない原因と対応方法

あれ?borderを指定したのに線が何も表示されてないぞ?border効いてないのか?

と思ってきた方へ、borderが効かない・表示されない原因と対応方法について説明します。

結論

border-style(線のデザイン)は「none」が初期値だから「solid」などを必ず指定しないといけません。

borderの基本

borderは以下の要素で構成されています。

  • border-width…線の太さ
  • border-style…線のスタイル(種類)
  • border-color…線の色

そしてこの3つは1行で指定できます。

border:1px solid #333

borderの基本をもっと詳しく知りたい方はこちら↓

borderが効かない・表示されない原因

以下のように指定しているとborderが効きません。

border:1px

border:1px #333

上記の場合border-styleの設定を省略しています。

設定を省略するとその初期値が適用されるのですが、border-styleの初期値は「none(なし)」です。「solid(直線)」ではありません。

つまり上記の場合、このように指定されているのです。

border:1px none #333

これじゃ表示されないわけです。

borderが効かないときの対応方法

対応方法はいたってシンプルで「solid」などnone以外のborder-styleを指定しましょう。

border:1px solid #333

その他のborderが効かない・表示されない原因

  • border-widthに「0」が指定されている
  • border-colorに#FFF(背景と同じ色)やtransparent(透明)が指定されている

これを直しても効いていない場合はCSSの記述ミスや優先度で負けている、CSSセレクタの指定を間違えているなどが考えられます。

下記記事を参考に見直してみてください。

まとめ

borderが効かない・表示されない原因はborder-style(線のデザイン)を指定していないからです。border-styleの初期値は「none」ですから表示されません。

「solid」などのborder-styleを指定しましょう。

以上、CSS borderが効かない・表示されない原因と対応方法でした。

関連記事