見出しの枠線について

Question

実現したいこと

illustratorで作成した枠線デザインをhtml、cssで実現させたいです。
長方形の外枠をラフ化しています。

今までは見出しタグに背景画像として貼り付けて、paddingで広げて活用していましたが、もっと良いやり方はないかと思っています。

できれば見出し(要素)のサイズ変更をしても崩れないようなものを実現したいです。

発生している問題・分からないこと

疑似要素のbeforeやafterを使って枠線の外側の線をかたどって、中の色は背景色を白にするようなイメージでいいんでしょうか？
それともsvgに書き出しをして何かしら別の方法で表示させるんでしょうか？

あいまいな言葉ですみませんが、よろしくお願いします。
画像はラフの数値

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

やり方を検索しましたが、それらしいものは見つかりませんでした。

補足

特になし

Answer 1

Lhankor_Mhyさんの回答の border-image でできそうです。
勉強がてらサンプルを作成してみました。

CodePen

ボーダー画像は質問の画像から切り抜いたものです。

Comments

[keel]

サンプルありがとうございます。
自分でも試してみてうまくいきました。

Answer 2

お探しのものは、border-image ですか？
border-image - CSS: カスケーディングスタイルシート | MDN

Comments

[keel]

ありがとうございます。
試してみたところ解決しました。

Answer 3

結局は画像なのでサイズ変更には弱いですね
あらかじめ何パターンか用意してサイズに合わせて適当なものを選択するのが現実的では？