border-radiusによる外枠と背景の隙間対策

border-radiusを指定すると、外枠と背景に隙間が発生します。Macでは問題なく表示されるようで、バグなのかな?と思いますが、かなり悩まされました。この隙間について、対策方法をまとめます。

隙間ができる要因

 

普通にborder指定して、隣接要素(直接の子要素)にbackground-colorを指定すると隙間ができます。また、borderと一緒にbackgroundにグラデーションを指定しても同様に隙間ができてしまいます。これは結構困る現象です。

対策方法

擬似要素にborderを指定して、position:absoluteで重ねると、問題なく表示できました。

 

See the Pen border-radiusによる外枠と背景の隙間対策 by yuming (@yuuuming) on CodePen.

「border-radiusによる外枠と背景の隙間対策」への1件のフィードバック

  1. Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at shokuro.org promoted as a resource on our blog alychidesign.com ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    .
    If you may be interested please in being included as a resource on our blog, please let me know.

    Thanks,
    Aly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です