CSSのborderで切手風フレームを作成

様々なボーダーを生成するツールも制作していますので、よろしければこちらどうぞ。

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

border-image-sourceの値に、円を描画した画像を設定します。ここで円の色（sgvのfillの値）は、親要素と同色にしておきます。
それをborder-image-sliceで分割し、四辺に割り当て、borderの幅の半分外側に配置します。

.stamp {
  --w: 15;
  --w-px: calc(var(--w) * 1px);
  width: 300px;
  height: 200px;
  /* フレームの色 */
  background: #7440e2;
  box-sizing: border-box;
  border-style: solid;
  border-width: calc(var(--w-px) * 2);
  border-image-slice: calc(var(--w) * 2);
  border-image-repeat: space;
  /* border幅の半分、borderを外側に配置 */
  border-image-outset: var(--w-px);
  /* 親要素の背景色で円を四角四辺に作成したSVGを利用 fill=%23に続くカラーコードを適宜変更*/
  border-image-source: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><defs><pattern id='circle' patternUnits='userSpaceOnUse' width='30' height='30' viewBox='0,0,100,100'><circle cx='50' cy='50' r='30' fill='%23eeeeff' /></pattern></defs><rect width='90' height='90' fill='url(%23circle)'/></svg>");
  &-inner {
    width: 100%;
    height: 100%;
    border-image-source: linear-gradient(#d0daff, #ecd0ff);
    /* borderの内側にもborder-imageを適用 */
    border-image-slice: 0 fill;
    /* border幅の半分、外側に広げる */
    border-image-outset: var(--w-px);
  }
}
body {
  background: #eeeeff;
  min-height: 100vh;
  display: grid;
  place-items: center;
}