corner-frame.sass

@mixin corner-frame($color: rgba(red, 0.5))
  position: relative

  &::before,
  &::after
    content: ""
    top: 0
    left: 0
    width: 100%
    height: 100%
    position: absolute
    background-image: linear-gradient($color, $color), linear-gradient($color, $color), linear-gradient($color, $color), linear-gradient($color, $color)
    background-repeat: no-repeat
    pointer-events: none

  &::before
    background-size: 1px 3px, 2px 1px, 1px 2px, 3px 1px
    background-position: 0 0, 1px 0, 100% calc(100% - 1px), 100% 100%

  &::after
    background-size: 1px 2px, 3px 1px, 1px 2px, 3px 1px
    background-position: 100% 1px, 100% 0, 0 calc(100% - 1px), 0 100%