星やハートのボーダーの作成方法　border-image-sourceの値にSVGコード

設定すべきプロパティがいくつかあるのですが、その中でも重要なのがborder-image-sliceです。
指定された画像を縦横3分割にし、上下左右のボーダーに割り当てることができます。
そのため、ボーダーに使用したいシェイプを縦横3×3配置するSVGコードを作成し、border-image-sourceの値にしました。

自身で作成したジェネレーターで生成したCSSのサンプルを載せています。

contents

星のボーダー
ハートのボーダー

星のボーダー

See the Pen Star frame by blue moon (@blue-moon) on CodePen.

.star {
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 40px;
  border-image-slice: 40; /* 使用する画像の上下左右40pxずつ、それぞれボーダーの上下左右に使用 */
  border-image-repeat: space; /* ボーダーの長さが使用する画像の倍数になるとは限らないため、その時の調整方法を指定 */
  border-image-source: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><defs><pattern id='star' patternUnits='userSpaceOnUse' width='40' height='40' viewBox='0,0,100,100'><polygon points='50,16 61.17,34.63 82.34,39.49 68.07,55.87 69.98,77.51 50,69 30.02,77.51 31.93,55.87 17.66,39.49 38.83,34.63' fill='%23ffdd2c' /></pattern></defs><rect width='120' height='120' fill='url(%23star)'/></svg>");
}

ハートのボーダー

See the Pen Heart frame by blue moon (@blue-moon) on CodePen.

.heart {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  border-style: solid;
  border-width: 30px;
  border-image-slice: 30;
  border-image-repeat: space;
  border-image-source: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><defs><pattern id='heart' patternUnits='userSpaceOnUse' width='30' height='30' viewBox='0,0,100,100'><path d='M 14,43 A 18,18 0,0,1 50,43 A 18,18 0,0,1 86,43 Q 90.16, 62.28 50,79 Q 9.84, 62.28 14,43 z'  fill='%23ff299c' stroke-width='2' stroke='%23ff299c'/></pattern></defs><rect width='90' height='90' fill='url(%23heart)'/></svg>");
}