<body>
   <section class="image-section">
      <img src="https://i.ibb.co/2Y1yHpm/penguin-3.jpg" alt="penguin">
   </section>
 
 <section class="dropdown">
   <select onchange="ChangeBorder()" id="border-dropdown">
      <option value="normal">No image</option>
     <option value="picture frame">Picture frame</option>
     <option value="gradient">Gradient</option>
     <option value="svg">Svg</option>
   <select>
 </section>
</body>
:root {
  --border-image: none;
  --border-style: ridge;
  --border-image-slice: 35;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-wrap: wrap;
  background-color: #708090;
}
img {
  width: 100%;
  height: auto;
}
section {
  display: flex;
  border-image-repeat: stretch;
  border-image-slice: var(--border-image-slice);
  justify-content: center;
  text-align: center;
  width: 17rem;
  padding: 2rem;
  margin-right: 1.5rem;
  min-height: 4rem;
  border-width: 2rem;
  border-style: var(--border-style);
  border-color: grey;
  transition: all 0.3s ease;
}
section:nth-child(1) {
  border-image-source: var(--border-image);
}
.dropdown {
  width: 6rem;
  border-style: none;
}
.dropdown > select{
  width: 9rem;
  padding-left: .5rem;
}

ChangeBorder = () => {
    let getValue = document.getElementById("border-dropdown").selectedOptions[0].value;
  let rootElement = document.querySelector(":root");
  
  if(getValue === "picture frame"){
    rootElement.style.cssText = 
    `--border-image: url('https://www.dropbox.com/s/blw9l5bhxvp4o6y/Gold-Sand-Border-frame-2.svg?raw=1')`;
    }
  else if(getValue === "gradient"){
    rootElement.style.cssText = 
    `--border-image: linear-gradient(to bottom right, #FFB302, #FFBA01, #FDE814);`; 
  }
  else if(getValue === "normal"){
    rootElement.style.cssText =
    `--border-image: none;`; 
  }
  else if(getValue === "svg"){
    rootElement.style.cssText = 
    `--border-image: url('https://www.dropbox.com/s/pkha2mtj32n9bwf/Kliponius_Snowflake_%28stylized%29.svg?raw=1');
    --border-image-slice: unset;`; 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.