3

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.

enter image description here

.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>
David Thomas
  • 249,100
  • 51
  • 377
  • 410
Jundev
  • 93
  • 1
  • 7
  • You seem to be using Tailwind CSS, so you could just use `rounded-lg` inside the `class` attribute, for example. More in the [border radius documentation](https://tailwindcss.com/docs/border-radius). – Julian Apr 22 '23 at 13:05
  • Apparently, you cannot use `border-radius` and a gradient together. However, I came across this plugin for Tailwind: https://github.com/batistein/tailwindcss-border-gradient-radius. – Julian Apr 22 '23 at 13:12

1 Answers1

0

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>
Alex
  • 77
  • 1
  • 6