CodePen Embed - Border with gradients

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>

.box {
  --b: 10px;
  width: 150px;
  display:inline-block;
  aspect-ratio:1;
  margin:10px;
  border:1px solid;
}
.one {
  background: 
    conic-gradient(from 90deg at var(--b) var(--b),#0000 25%,red 0)
    0 0/calc(100% - var(--b)) calc(100% - var(--b))
}
.two {
  background: 
    conic-gradient(from 90deg at calc(2*var(--b)) calc(2*var(--b)),#0000 25%,red 0)
    calc(-1*var(--b)) calc(-1*var(--b))
}
.three {
  background: 
    conic-gradient(at calc(2*var(--b)) calc(100% - 2*var(--b)),#0000 25%,red 0)
    calc(-1*var(--b)) calc(var(--b))
}
.four {
  background: 
    conic-gradient(at right calc(2*var(--b)) bottom calc(2*var(--b)),red 75%,#0000 0)
    var(--b) var(--b)
}

Run Pen

This Pen is owned by Temani Afif on CodePen.

See more by @t_afif on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.