<section class="code-section">
  <code>
    <span>.container</span>
    <span class="bracket">{</span>
    <br />
    <div class="code-inputs">
      <span>border-image-slice</span>:
      <input type='number' value="0" min=0 max="100" />
      <input type='number' value="70" min=0 max="100" />
      <input type='number' value="75" min=0 max="100" />
      <input type='number' value="0" min=0 max="100" />
      <select>
        <option value="no suffix">no suffix</option>
        <option value="%">%</option>
      </select>
      ;
      <div class="fill-section">
        <input id='fill-checkbox' type='checkbox' checked='true' />
        <label for='fill-checkbox' class="code-value">fill</label>
      </div>
      <br />
      <span>border-image-repeat</span>: <span class="code-value">stretch</span>;
      <br />
    </div>
    <span class='bracket'>}</span>
  </code>
</section>

<section class='container'></section>
:root {
    --border-repeat: stretch;
    --border-style: ridge;
    --border-image-slice: 70 75 fill;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-wrap: wrap;
    background-color: #DCAE96;
}
section{
    text-align: center;
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    padding: 2rem;
    height: 10rem;
    align-items: center;
    justify-content: center;
}
.container {
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-image-source: url('https://img.freepik.com/free-vector/gradient-glassmorphism-background_23-2149447863.jpg?w=740&t=st=1669374788~exp=1669375388~hmac=d1be5769a3b68e6441d54df7954be072a1f8f476d0d26b26ff8380018c1175a4');
    border-image-slice: var(--border-image-slice);
    border-image-repeat: var(--border-repeat);    
    border-width: 2.5rem;
    width: 15rem;
    border-color: grey;
    border-style: var(--border-style);
    transition: all 0.3s ease;
}
/* code section */
.code-section{
  width: 30rem;
  margin-right: 1rem;
  margin-bottom: 2rem;
  text-align: left;
  background: #1e1e1e;
  color: white;
}
.code-section span{
    color: rgba(188,212,42,1);
}
span.bracket{
    color:white;
}
span.code-value, label.code-value{
    color: rgba(255,106,56,1); 
}
.code-section code .code-inputs{
  padding-left: 1rem;
}
.code-section code .fill-section{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 2rem;
  padding: 0;
  margin: 0;
}
.fill-section label{
  margin: 0;
  width: 0;
}
.fill-section input{
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 1rem;
}
.code-inputs input[type="number"]{
  width: 3rem;
  text-align: center;
}
const allNumInputs = document.querySelectorAll("input[type='number']");
const rootElement = document.querySelector(':root');
// select dropdown for '%' and 'no suffix'
const selectDropdown = document.querySelector('select');
let borderImageSliceValue = '';

// Adds a change event listener to all number inputs
for (let i = 0; i < allNumInputs.length; i++) {
    element = allNumInputs[i];
    element.addEventListener('change', () => {
        if(selectDropdown.value == '%'){
            addBorderImageSliceValue('%');
        }
        else{
            addBorderImageSliceValue('');
        }
    })
}

// Fill checkbox toggle
const fillCheckBox = document.querySelector('#fill-checkbox');
fillCheckBox.addEventListener('change', () => {
    let rootStyle = getComputedStyle(rootElement);
    if (fillCheckBox.checked == true) {
        rootElement.style.cssText =
            `--border-image-slice: ${rootStyle.getPropertyValue('--border-image-slice') + ' fill'}`;
    } else {
        let borderImageSliceVal = rootStyle.getPropertyValue('--border-image-slice');    
        borderImageSliceVal = borderImageSliceVal.replace(' fill', '');
        rootElement.style.cssText =
            `--border-image-slice: ${borderImageSliceVal}`;
    }
})

// 'px' or 'no suffix' dropdown
selectDropdown.addEventListener('change', () => {
    if (selectDropdown.value == '%') {
        addBorderImageSliceValue('%');
    }
    else{
        addBorderImageSliceValue('');
    }
})

/*
* Function that accepts a suffix string for the number input value.
* Whether it's '%' or 'no suffix' 
*/
function addBorderImageSliceValue(suffix) {
    borderImageSliceValue = '';
    let fillPresent = checkIfFillIsChecked();
    for (let i = 0; i < allNumInputs.length; i++) {
        numInput = allNumInputs[i];
        if (numInput.value == 0) {
            continue;
        }
        
        borderImageSliceValue += " " + numInput.value + suffix;
    }

    if(fillPresent){
        rootElement.style.cssText =
    `--border-image-slice: ${borderImageSliceValue + ' fill'}`;       
    }
    else{
        rootElement.style.cssText =
    `--border-image-slice: ${borderImageSliceValue}`;
    }
    
}

// Function to check if fill keyword is present
function checkIfFillIsChecked(){
    let rootStyle = getComputedStyle(rootElement);
    let borderImageSliceVal = rootStyle.getPropertyValue('--border-image-slice');
    return borderImageSliceVal.includes('fill');   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.