<section>
  <div class="baz">Baz!</div>
  <div class="qux">Qux!</div>
</section>

section {
  border: 0.5em solid #efefef;
  display: flex;
  gap: 1em;
  margin: 1em;
  overflow: hidden;
}

div {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background: #efefef;
  background-clip: content-box;
}

.baz {
  border: 6px solid transparent;
  border-image: radial-gradient(
      white 20%,
      red 15%,
      white,
      green 70%,
      transparent 75%
    )
    49% fill;
}

.qux {
  border: 6px solid;
  border-image: radial-gradient(
      white,
      #aaa 0%,
      #fff 80%,
      transparent 100%
    )
    25%;
}