borderの外側のborder
box-shadowを四方にblurなしで付けると外側のborder(みたいなもの)になる
div { border: solid 1px #fff; box-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000; /* prefixは適当に */ }
なんだけど、Androidはblurが0だとbox-shadowが描画されないので・・・擬似要素とかでなんとかする
div { border: solid 1px #fff; } div::before { content: ' '; display: block; position: absolute; /* サイズを元の要素よりも1pxずつ大きくする */ top: -1px; right: -1px; bottom: -1px; left: -1px; background: #000; /* 裏側へ */ z-index: -1; }
追記:ソースにないけどこれ、border-radiusを使う前提でやってて、border-radiusいらないならoutline使うのが簡単そう