Rounded square within background-image

_background-image-rounded-square.scss

// Naive way to create a rounded square shape within a background-image.
// This creates 4 corner circles (radial-gradient) and two overlapping
// rectangles (linear-gradient) to form the shape. The code below only supports
// solid colors, but with some math applied to the gradient and gradient stops,
// you may be able to have a seamless gradient.

$rounded-square-bg: blue;
$rounded-square-radius: 15px;

.rounded-square-within-background-image {
  width: 100px;
  height: 100px;
  background-image:
      radial-gradient(circle #{$rounded-square-radius} at #{$rounded-square-radius} #{$rounded-square-radius}, #{$rounded-square-bg} 99%, transparent 0),
      radial-gradient(circle #{$rounded-square-radius} at calc(100% - #{$rounded-square-radius}) #{$rounded-square-radius}, #{$rounded-square-bg} 99%, transparent 0),
      radial-gradient(circle #{$rounded-square-radius} at calc(100% - #{$rounded-square-radius}) calc(100% - #{$rounded-square-radius}), #{$rounded-square-bg} 99%, transparent 0),
      radial-gradient(circle #{$rounded-square-radius} at #{$rounded-square-radius} calc(100% - #{$rounded-square-radius}), #{$rounded-square-bg} 99%, transparent 0),
      linear-gradient(to right, transparent #{$rounded-square-radius}, #{$rounded-square-bg} #{$rounded-square-radius} calc(100% - #{$rounded-square-radius}), transparent calc(100% - #{$rounded-square-radius})),
      linear-gradient(to bottom, transparent #{$rounded-square-radius}, #{$rounded-square-bg} #{$rounded-square-radius} calc(100% - #{$rounded-square-radius}), transparent calc(100% - #{$rounded-square-radius}));
  background-repeat: no-repeat;
}

// Translates to:
//
// .rounded-square-within-background-image {
//   width: 100px;
//   height: 100px;
//   background-image:
//     radial-gradient(circle 15px at 15px 15px, blue 99%, transparent 0),
//     radial-gradient(circle 15px at calc(100% - 15px) 15px, blue 99%, transparent 0),
//     radial-gradient(circle 15px at calc(100% - 15px) calc(100% - 15px), blue 99%, transparent 0),
//     radial-gradient(circle 15px at 15px calc(100% - 15px), blue 99%, transparent 0),
//     linear-gradient(to right, transparent 15px, blue 15px calc(100% - 15px), transparent calc(100% - 15px)),
//     linear-gradient(to bottom, transparent 15px, blue 15px calc(100% - 15px), transparent calc(100% - 15px));
//   background-repeat: no-repeat;
// }