画像使うのOKならsvgかなにかで「という画像を作って、beforeをblock要素にしたやつに背景を2枚設定（上左と上右。それぞれleft:0、right:0とする）、afterにも同じように背景に2枚設定するというのはどうだろう。borderでやりきるのは無理っぽい気がする。
空タグ入れたくないなら背景画像かね。親タグに::beforeで絶対配置、left-1px top-1px 縦横calc(100% + 2px)とか。background-positionで四隅に画像配置とか。
border-image でゴニョゴニョする。
ボーダーのあれだ、グラデを作る。。
要素がサイズ固定なら10*10のbeforeに黒のbox-shadowを4つ重ねて位置をずらして、afterで灰色重ねるとか？
ご回答ありがとうございます。画像は未使用でサイズは固定でも大丈夫です。黒のbox-shadowを4つ重ねる方法を試してみたいと思います。
border-image-slice 使わないの？https://developer.mozilla.org/ja/docs/Web/CSS/border-image-slice
Re:9 そんなのあるんだ！
SVGとborder-image-sliceでやってみたよ。https://codepen.io/anon/pen/REWzzRdivのheightを指定したときの挙動とかがちょっと独特で、よくわからない…。
10 件の回答
画像使うのOKならsvgかなにかで「という画像を作って、
beforeをblock要素にしたやつに背景を2枚設定（上左と上右。それぞれleft:0、right:0とする）、
afterにも同じように背景に2枚設定するというのはどうだろう。
borderでやりきるのは無理っぽい気がする。
空タグ入れたくないなら背景画像かね。
親タグに::beforeで絶対配置、
left-1px top-1px 縦横calc(100% + 2px)とか。
background-positionで四隅に画像配置とか。
border-image でゴニョゴニョする。
ボーダーのあれだ、グラデを作る。。
要素がサイズ固定なら10*10のbeforeに黒のbox-shadowを4つ重ねて位置をずらして、afterで灰色重ねるとか？
ご回答ありがとうございます。
画像は未使用でサイズは固定でも大丈夫です。
黒のbox-shadowを4つ重ねる方法を試してみたいと思います。
border-image-slice 使わないの？
https://developer.mozilla.org/ja/docs/Web/CSS/border-image-slice
Re:9
そんなのあるんだ！
SVGとborder-image-sliceでやってみたよ。
https://codepen.io/anon/pen/REWzzR
divのheightを指定したときの挙動とかがちょっと独特で、よくわからない…。