<form>
  <p>
    <code>background-origin</code>:
    <label>
      <input type="radio" name="bo" value="padding-box" checked>
      <code>padding-box</code>
    </label>
    <label>
      <input type="radio" value="border-box" name="bo">
      <code>border-box</code>
    </label>
  </p>
</form>

<div></div>

div {
  width: 75vmin;
  height: 75vmin;
  border-radius: 5ch;
  border: 8vmin solid hsl(0 0% 100% / 25%);
  background: conic-gradient(
    from 35deg at bottom left,
    deeppink,
    rebeccapurple
  );
}



/* Other styles */

* {
  box-sizing: border-box;
}

html, body {
  block-size: 100%;
  inline-size: 100%;
}

body {
  display: grid;
  justify-items: center;
  align-content: center;
}

p {
  margin: 0 0 1em;
}

form {
  text-align: center;
}

label {
  margin-inline-start: 1em;
  user-select: none;
}

code {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
}

let box = document.querySelector('div');
let form = document.querySelector('form');

form.onchange = () => {
  let val = form.querySelector(':checked').value;
  box.style.setProperty('background-origin', val);
};