border-image の表示がブラウザで異なる

見出しに下線を引いたとき、safari と chrome で表示が異なっていた。
原因は border-width の違いのようで、初期値は normal で safari はそうなっているけど、chrome は 初期値が 0 のようです。

仕様書ではイメージが読み込めなかった時のためにスタイルが必須のようなので、 border-style の有無で判定すると思いきや、safari は width だけ、 chrome は width と style の合わせ技で判断してるのですね。

両立させたい時は border-width: 0; 必須という感じですかね。
感覚的には Mac の chrome がわかりやすい。（ chrome の width の初期値が 0 なのはどうかと思いますが）

参考:
MDN の border-image の説明
MDN の border-width の説明

See the Pen border-image by kihi1215 (@kihi) on CodePen.