Is it possible to apply border-radius to border-image? [duplicate]

Question

I am styling an input field with a rounded border (border-radius) like the image below. and attempting to add a gradient to said border. However, I tried applying the code below or the results I found by searching, but it didn't work. Please tell me how to do it.

.container{
  background: #ffffff;
  box-shadow: 1px 1px 12px 3px rgba(108, 128, 147, 0.25);
  border-radius: 18px;
  border: 9px solid;
  border-image: linear-gradient(
      337.17deg,
      #00d4f1 10%,
      #6061c4 50%,
      #ffabed 100%
    )
    1;
}

<div class="container flex flex-col justify-start items-center w-3/12 pt-6 pb-7 pl-6 pr-6 relative">
</div>

Answer 1

I have created a sample of how you can create the code using pure CSS.

.input-container {
  display: inline-block;
  position: relative;
  background: linear-gradient(337.17deg, #00d4f1 10%, #6061c4 50%, #ffabed 100%);
  border-radius: 18px;
  padding: 9px;
  overflow: hidden;
  height: 350px;
  width: 200px;
}

.gradient-border-input {
  display: block;
  width: calc(100% - 21px);
  height: calc(100% - 18px);
  background: #ffffff;
  border: none;
  outline: none;
  box-shadow: 1px 1px 12px 3px rgba(108, 128, 147, 0.25);
  border-radius: 18px;
  padding: 10px;
}

<div class="input-container">
  <input class="gradient-border-input" type="text" />
</div>