.box0 {
  --border-width: 16px;
  position: relative;
  display: inline-block;
  width: 50%;
  height: 10rem;
  background: white;
  box-sizing: border-box;
  border: solid var(--border-width);
  border-image: radial-gradient( red, green, blue) 1;
  padding: 1rem;
}


.box1 {
  --border-width: 16px;
  --border-radius: 3rem;
  position: relative;
  display: inline-block;
  width: 50%;
  height: 10rem;
  border-radius: var(--border-radius);
  background: white;
  box-sizing: border-box;
  background-clip: padding-box;
  border: solid var(--border-width) transparent;
  padding: 1rem;
}
.box1:before {
  content: "";
  position:absolute;
  width: calc(100% + 2 * var(--border-width));
  height: calc(100% + 2 * var(--border-width));
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:-1;
  margin: calc(-1 * var(--border-width));
  border-radius: var(--border-radius);
  background: linear-gradient(to right, red, blue);
}

.box2-wrapper {
  --border-width: 16px;
  --border-radius: 3rem;
  position:relative;
  width: 50%;
  height: 10rem;
  border-radius: var(--border-radius);
  background: conic-gradient(red, blue, green, red);
}
.box2 {
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  background: white;
  box-sizing: border-box;
  background-clip: padding-box;
  border: solid var(--border-width) transparent;
  padding: 1rem;
}