影が親要素のoverflowで切られている
box-shadowは要素の外側に広がって描画されます。親要素にoverflow:hidden;が指定されていると、要素の枠からはみ出した影が切り取られて見えなくなります。カードを角丸にするためにhiddenを当てた親で起きがちです。
影を見せたい場合は、影を付ける要素を切り取り対象の外に出すか、親のoverflowを見直します。角丸の切り取りと影の表示を両立させたいときは、構造を分けて設計するのが定石です。
角丸が効かないのは背景や枠線の有無
border-radiusは要素の角を丸めますが、背景色も枠線も画像もない透明な要素では、丸まっていても見た目に変化が現れません。角丸を確認したいなら、まずbackgroundやborderで境界を可視化してください。
中の画像が角からはみ出して四角く見える場合は、子要素側にoverflow:hidden;を当てて親の角丸でクリップする必要があります。背景画像ならbackground-clipの指定も検討します。
症状別チェック表
影（box-shadow）や角丸が効かないときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
値の書き方とサイズの落とし穴
box-shadowは「水平・垂直のずれ・ぼかし・広がり・色」の順で値を書きます。色の指定漏れや、ぼかしと広がりの値が極端だと、影があるのに見えにくいことがあります。まずは控えめな値で確実に出るか確認しましょう。
border-radiusの値が要素サイズに対して大きすぎると、想定外に丸くなったり潰れたりします。逆に小さすぎると変化に気づけません。要素の幅・高さと値のバランスを確認してください。
効かないときの切り分け手順
影と角丸で原因が違うので、症状ごとに次の順で確認します。
- 影が見えないなら親のoverflow:hidden;で切られていないか確認する
- box-shadowの値の順序と色指定が正しいか確認する
- 角丸は背景色や枠線で境界が見える状態か確認する
- 中の画像がはみ出すなら子にoverflow:hidden;を当てる
- 値が要素サイズに対して極端でないか調整する
微妙な見え方は共有して合意する
影の濃さや角丸の半径は好みや解像度で印象が変わる繊細な要素です。コードや単体のスクリーンショットだけでは伝わりにくく、実際の表示を一緒に見ながら調整するのが結局いちばん早いです。
ギガサイト便なら、検証用のHTMLをドロップして発行された〇〇.giga-site.comのURLを共有すれば、相手が実際の影や角丸を確認できます。同じURLのまま値を差し替えながら見せられるので、レビューの往復が減ります。アクセスログで誰が確認済みかも追えます。社外に見せたくない段階の検証は認証を併用してください。
よくある質問
box-shadowを付けたのに影が見えません
親要素のoverflow:hidden;ではみ出した影が切り取られている可能性が高いです。影を付ける要素を切り取りの外に出すか、親のoverflowを見直してください。
border-radiusを指定しても角が四角いままです
背景色も枠線もない透明な要素では角丸が見た目に現れません。backgroundやborderで境界を可視化すると丸みを確認できます。
角丸の中の画像が角からはみ出します
子要素側にoverflow:hidden;を当てて親の角丸でクリップします。背景画像の場合はbackground-clipの指定も検討してください。
影と角丸クリップを同時に成立させたいです
角丸クリップ用のoverflow:hidden;が影を切ってしまうため、影を付ける層と切り取る層を別要素に分ける構造にすると両立できます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。