border-radiusを指定すると、外枠と背景に隙間が発生します。Macでは問題なく表示されるようで、バグなのかな？と思いますが、かなり悩まされました。この隙間について、対策方法をまとめます。
普通にborder指定して、隣接要素（直接の子要素）にbackground-colorを指定すると隙間ができます。また、borderと一緒にbackgroundにグラデーションを指定しても同様に隙間ができてしまいます。これは結構困る現象です。
擬似要素にborderを指定して、position:absoluteで重ねると、問題なく表示できました。
See the Pen border-radiusによる外枠と背景の隙間対策 by yuming (@yuuuming) on CodePen.
枠線を表現するのに、いくつか方法がありますのでまとめます。
See the Pen 枠線の表示方法 外枠 by yuming (@yuuuming) on CodePen.
一番スタンダードな指定方法ですね。問題なければ、普通にこの方法をとりたいです。
複数カラムでレイアウトしたい場合、要素の幅設定（box-sizing=”border-box”）を指定しておかないと、%指定がうまくいきません。
例）
3つ箱を横に並べる場合は、幅33.33%にしますが、box-sizing=”contents-box”では、borderで指定した幅分が含まれないので、カラム落ちします。
本来は影のスタイルを指定するプロパティですが、ぼかし無しで指定することで枠線に見せます。borderに近い感覚で指定できます。重ねて指定することで、多重の枠が表現できます。
なお、box-shadowは要素の幅指定には関係しません。ウィンドウ幅に影響されて線幅が小数点になることはないため、ウィンドウ幅変更による表示の欠けの問題はクリアできます。
外側指定の場合、四隅が微妙に角丸になります。
また、親要素にoverflow:hidden;が設定されていると、枠線が見切れるため、親要素との余白の調整が必要となります。もしくは内側（inset）に設定して、枠が内容に被る分は調整必要です。
１または２で解決できない場合はこの方法が良いかと思います。
擬似要素は子要素として、要素の内側に表示されるので、重なり順や他子要素との兼ね合いに注意してください。
子要素が透過度０の場合はこの方法も使用できますね。枠線にパターンやテクスチャをつけたい場合はこの方法で実現できます。
子要素の背景を透過したい場合は使えません。
親要素（ulなど）の中に複数の子要素(ilなど)を横に並べるような場合、間に垂線を表示して格子状にする方法も色々です。
See the Pen 枠線の表示方法 格子 by yuming (@yuuuming) on CodePen.
間の枠線が重複するため、枠を重ねるようにネガティブマージンを設定します。もしくは間の枠線の片方を無くします。
外枠は親要素(ul)にborderを指定し、間の線は、liにborderを指定します。
外枠は親要素(ul)にborderを指定し、間の線は、擬似要素の背景色で表現します。
以下のように、３カラムの画像のまわりに枠線に表示するのに、一苦労しましたので、解決策をまとめておきたいと思います。
初めは画像に直接枠線を入れていたのですが、ウィンドウサイズによって、表示幅に小数点がつくため見た目が変わってくるという問題につまづきました。ウィンドウサイズを変更すると、垂線が消えたり太くなったりしていました。
汎用性も考えて、cssで枠線を表示することにし、色々試しました。枠線の表示方法についてはこちら（枠線の表示手段まとめ）を参照してください。
今回、一番ズレる心配がなく、スマートだと思われる方法で、以下の方法をとりました。
カラム落ちを防ぐためにbox-sizing=”border-box”を設定するため、liにborderを設定すると、borderなしのliだけ、borderの幅分、box中身のサイズが変わってしまいます。
今回、枠の中に画像を表示する必要があった（box中身のサイズを３カラムとも同じにしたい）ため、上記の方法をとりました。
See the Pen 1pxの垂直線が上手いこと表示されない by yuming (@yuuuming) on CodePen.
