<div class="box">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, temporibus, aut officia minus sequi quae molestias beatae, qui ipsa mollitia alias accusamus voluptate ratione provident numquam iure quia aliquam tempore possimus consequatur vel. Iure atque enim in?</p>
</div>

<div class="form">
  <div class="control">
    <label for="background-clip">background-clip:</label>
    <select name="background-clip" id="background-clip">
      <option value="border-box">border-box</option>
      <option value="padding-box">padding-box</option>
      <option value="content-box">content-box</option>
    </select>
  </div>
  <div class="control">
    <label for="border-radius">border-radius:</label>
    <input type="range" id="border-radius" min="0" max="100" value="50" step="10" />
    <output data-border-radius>50px</output>
  </div>
  <div class="control">
    <label for="border-top-width">border-top-width:</label>
    <input type="range" id="border-top-width" min="0" max="100" value="50" step="10" />
    <output data-border-top-width>50px</output>
  </div>
  <div class="control">
    <label for="border-right-width">border-right-width:</label>
    <input type="range" id="border-right-width" min="0" max="100" value="50" step="10" />
    <output data-border-right-width>50px</output>
  </div>
  <div class="control">
    <label for="border-bottom-width">border-bottom-width:</label>
    <input type="range" id="border-bottom-width" min="0" max="100" value="50" step="10" />
    <output data-border-bottom-width>50px</output>
  </div>
  <div class="control">
    <label for="border-left-width">border-left-width:</label>
    <input type="range" id="border-left-width" min="0" max="100" value="50" step="10" />
    <output data-border-left-width>50px</output>
  </div>
  <div class="control">
    <label for="padding-top">padding-top:</label>
    <input type="range" id="padding-top" min="0" max="100" value="50" step="10" />
    <output data-padding-top>50px</output>
  </div>
  <div class="control">
    <label for="padding-right">padding-right:</label>
    <input type="range" id="padding-right" min="0" max="100" value="50" step="10" />
    <output data-padding-right>50px</output>
  </div>
  <div class="control">
    <label for="padding-bottom">padding-bottom:</label>
    <input type="range" id="padding-bottom" min="0" max="100" value="50" step="10" />
    <output data-padding-bottom>50px</output>
  </div>
  <div class="control">
    <label for="padding-left">padding-left:</label>
    <input type="range" id="padding-left" min="0" max="100" value="50" step="10" />
    <output data-padding-left>50px</output>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 1rem;
}

.box {
  width: min(100%, 600px);
  background-color: #fff;
  box-shadow: 0 0 10px 1px rgb(0 0 0 / 25%);
  display: flex;
  align-items: stretch;
  position: relative;
  margin: auto;
  border-color: rgb(220 20 20 / 38%);
  border-style: solid;
  border-radius: var(--border-radius);
  border-width: var(--border-top-width) var(--border-right-width)
    var(--border-bottom-width) var(--border-left-width);

  padding: var(--padding-top) var(--padding-right) var(--padding-bottom)
    var(--padding-left);
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(34 190 120 / 0.6);
  z-index: 1;
  border-radius: calc(var(--border-radius) - var(--border-top-width))
    calc(var(--border-radius) - var(--border-right-width))
    calc(var(--border-radius) - var(--border-bottom-width))
    calc(var(--border-radius) - var(--border-left-width));
}

:root {
  --clip: border-box;
  --border-radius: 50px;
  --border-top-width: 30px;
  --border-right-width: 30px;
  --border-bottom-width: 30px;
  --border-left-width: 30px;
  --padding-top: 30px;
  --padding-right: 30px;
  --padding-bottom: 30px;
  --padding-left: 30px;
}

.box {
  background: #fff
    url("//www.w3cplus.com/sites/default/files/blogs/2022/2207/avatar.svg") left
    top / 100px 100px repeat;
  background-clip: var(--clip);
}

.box p {
  background-color: rgb(129 133 151 / 67%);
  line-height: 1.6;
  text-align: justify;
  letter-spacing: 0.025em;
  padding: 10px;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 50%);
  z-index: 2;
  border-radius: calc(
      var(--border-radius) - var(--border-top-width) - var(--padding-top)
    )
    calc(
      var(--border-radius) - var(--border-right-width) - var(--padding-right)
    )
    calc(
      var(--border-radius) - var(--border-bottom-width) - var(--padding-bottom)
    )
    calc(var(--border-radius) - var(--border-left-width) - var(--padding-left));
}

.form {
  padding: 1rem;
  background-color: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form select {
  padding: 0.25em 0.5em;
  font-size: inherit;
}

const rootElement = document.documentElement;
const cliptHander = document.getElementById("background-clip");
const inputs = document.querySelectorAll("input");

cliptHander.addEventListener("change", (etv) => {
  rootElement.style.setProperty("--clip", etv.target.value);
});

inputs.forEach((item, index) => {
  item.addEventListener("change", (etv) => {
    rootElement.style.setProperty(
      `--${etv.target.id}`,
      `${etv.target.value}px`
    );
    document.querySelector(
      `output[data-${etv.target.id}]`
    ).textContent = `${etv.target.value}px`;
  });
});