border-radius が効かなかったのを直した

概要

他のスタイルが優先されていた状態ではなく、 border-radius が効かなかったので紹介しようと思います。

問題のコード

<div>
    <div :class="$style.plan">
        <p>お菓子</p>
        <p>美味しいお菓子</p>
        <p>綺麗なお菓子</p>
        <p>温かいお菓子</p>
    </div>
    <div :class="$style.plan">
        <p>和服</p>
        <p>美味しい和服</p>
        <p>綺麗な和服</p>
        <p>温かい和服</p>
    </div>
    <div :class="$style.plan">
        <p>緑茶</p>
        <p>美味しい緑茶</p>
        <p>綺麗な緑茶</p>
        <p>温かい緑茶</p>
    </div>
</div>

.plan {
  padding: 50px;
  background-clip: content-box;
  border-radius: 5px;
}

上記のように background-clip を使用していると border-radius が使えませんでした。

解決したコード

.plan {
  margin: 50px;
  border-radius: 5px;
}

background-clip を使うのをやめたら解決しました。

Tips: background-clip による要素の境界の指定を無くしてしまったので表示が崩れてしまいましたが、 padding を margin に変えたことで対処できました。

以上参考になりましたら幸いです。