【CSS】border-radiusで画像に枠線が表示される場合の対処法｜background-clipとは何か？

divタグの中で呼び出した背景画像にborder-radiusを適用したときに、意図しない薄いグレーの枠線が表示されてしうことがあります。

ここではborder-radiusを適用したときに表示される、枠線を消す方法についてまとめています。

表示される枠線の例

以下のように「border-radius」属性を追加したときのみ、画面上にグレーの枠線が表示されます。（少しわかりにくいかもしれません）

エラー発生時のコードの中身

なお、エラー発生時のコードは以下のようになっています。

「background-image」を適用したdivタグにheigtとborder-radiusを設定しているだけです。

.c-jumbotron--block{
  border-radius: 8px;
  height: 320px;
}

<div class="c-jumbotron c-jumbotron--block" style="background-image: url('http://hoge/1xxx.jpg');">
</div>

これまでの画像は濃い色だったので枠線が目立たなかったものの、画像を変更したことで白地になり枠線が顕著に見えるようになり、問題が顕在化しました。

対処法

対処法はとても簡単でCSSに以下を追加するだけです。

background-clip: padding-box;

実例

.c-jumbotron--block{
  border-radius: 8px;
  height: 320px;
  background-clip: padding-box;
}

これでグレーの枠線が表示されなくなりました。

background-clipとは何か？

今回使用した、background-clipとは「要素の背景をどこまで適用するか」を指定するプロパティです。

値を「padding-box」としたことで、「背景をパディングの外側の辺まで拡張。境界の下には背景を表示しない」という処理になります。

「境界の下には背景を表示しない」ため、境界のところに出ていた枠線が消えます。

background-clipを使って各値を設定したときに、画像がどのように表示されるかMDNの公式サイトで確認することができます。

・MDN公式 background-clipプロパティ