ボーダーに
パターンを
CSSで設定CSSのborder-imageで
吹き出しなどのデザインを
簡単に設定する

CSSのborder-imageを使うと罫線内に連続するパターンを入れられますが、それだけでなく下のような吹き出しのデザインも、ひとつのテンプレート画像で縦横可変の自在なデザインが可能になります。

上の画像のデモページ：https://labo.studio-happyvalley.com/borderImage/baloonFlex/

使用する画像は次の二つのみです。
左吹き出し用と、右吹き出し用。
SVGファイルを使うと一つで済みますが
意図しない拡大が発生するので普通にWEBPなどの画像がいいと思います。

基本は四隅のユニットとその間のパターンで構成されます。
間のパターンは水玉とか連続模様にできるものなら何でも可です。サンプルは単純な直線です。

CSSの設定は一括指定で行います。

border-image: 
url('画像パス') 上 右 下 左 fill
/ 上px 右px 下px 左px round;

必要な数値は枠からの長さのみです。それぞれ外周から上、右、下、左の長さが必要になります。(40px, 60px, 40px, 40px)

『/』で区切って二種類の指定をしますが、最初が地の指定、次が枠の指定です。順番は変えられません。
地の指定には単位は入れず、最後にキーワード『fill（中央の画像領域を維持し、背景画像のように表示します）』を指定します。
単位は枠の指定のみに入れます、同じくキーワード『round（元画像の辺の領域を繰り返して並べます。』を最後に指定します。

吹き出しのみのHTMLです。

<div class="baloon">I love you.</div>

吹き出しのCSSです。
枠線とセリフに余白が欲しいのでborder-widthを指定します。

.baloon {
	border-image: url(../images/serif_left.webp) 40 64 40 40 fill/ 40px 64px 40px 40px round;
	border-width: 20px 60px 20px 28px;
}

親のdisplayプロパティを’frid’と’flex’の二種類で設定してみました。
親要素にFlexを指定した吹き出しのデモ：https://labo.studio-happyvalley.com/borderImage/baloonFlex/
親要素にGridを指定した吹き出しのデモ：https://labo.studio-happyvalley.com/borderImage/baloonGrid/
MDNのborder-imageの解説：https://developer.mozilla.org/ja/docs/Web/CSS/border-image