CSS gradient border not showing correctly

Question

I want to set half blue and orange for border-color of text input.

I tried using a gradient but it doesn't work.

what is my code problem?

.search {
  width: 550px;
  height: 50px;
  margin-left: 350px;
  border-radius: 20px;
  outline: none;
  margin-top: 70px;
  border: solid;
  border-image: linear-gradient(to right, rgb(254, 113, 53) 50%, rgb(55, 154, 214) 50%);
  font-size: 20px;
  text-align: center;
  transition: all 0.2s linear;
}

.search:hover,
.search:focus {
  border: #4cbea5 solid;
}

<div>
  <form method="post">
    <input type="Search" class="search" placeholder="Search">
  </form>
</div>

Temani Afif · Accepted Answer · 2020-10-28T21:25:25.267

You need to specify the slice value inside border-image like this :

.search {
  width: 550px;
  height: 50px;
  border-radius: 20px;
  outline: none;
  margin-top: 70px;
  border: solid;
  border-image: linear-gradient(to right, rgb(254, 113, 53) 50%, rgb(55, 154, 214) 50%) 2;
  font-size: 20px;
  text-align: center;
 }

<form method="post">
    <input type="Search" class="search" placeholder="Search">
  </form>

You can read more about border-image

By the way, you cannot use border-radius with border-image but you can achive the same using multiple background and by adjusting background-clip. This will also allow you to have the hover behavior:

.search {
  width: 550px;
  height: 50px;
  border-radius: 20px;
  outline: none;
  margin-top: 70px;
  border: 2px solid transparent;
  background: 
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(to right, rgb(254, 113, 53) 50%, rgb(55, 154, 214) 50%) border-box;
  font-size: 20px;
  text-align: center;
  transition: all 0.2s linear;
}

.search:hover,
.search:focus {
  border-color:#4cbea5;
}

<form method="post">
    <input type="Search" class="search" placeholder="Search">
  </form>

Related: Border Gradient with Border Radius

score 2 · Answer 2 · 2017-12-05T19:08:43.187

To get the half orange, half blue gradient on the border you are looking for, make use of border-image-slice property and apply the blue and orange border-image on the search class. You can look at the clean border gradient and the smooth transition on hover. Hope, it helps.

.search{
  width: 550px;
  height: 50px;
  margin-left: 350px;
  border-radius: 20px;
  outline: none;
  margin-top: 70px;
  border: solid;
  border-image: linear-gradient(to right, #4cbea5 0%, orange 100%);
  border-image-slice: 1;
  font-size: 20px; 
  text-align: center;
   transition: all 0.2s linear;
}
.search:hover , .search:focus{
border: #4cbea5 solid;
}

<div>
    <form method="post">
    <input type="Search" class="search" placeholder="Search">
    </form>
    </div>

score 0 · Answer 3 · answered Dec 05 '17 at 19:01

You had a typo on this gradient line, it should be like this:

  border-image: linear-gradient(to right, rgb(254, 113, 53), rgb(55, 154, 214)) 1 20%;

See running demo:

.search {
  width: 550px;
  height: 50px;
  margin-left: 50px;  /* adjust as needed */
  border-radius: 20px;
  outline: none;
  margin-top: 70px;
  border: solid 5px;  /* made thicker for illustration purposes only */
  border-image: linear-gradient(to right, rgb(254, 113, 53), rgb(55, 154, 214)) 1 20%;
  font-size: 20px;
  text-align: center;
}

.search:hover,
.search:focus {
  border: #4cbea5 solid;
}

<div>
  <form method="post">
    <input type="Search" class="search" placeholder="Search">
  </form>
</div>

i don't think there is a typo but missing numbers :) as the OP doesn't want a gradient but 2 solid colors. So his gradient is correct he's simply missing some property ;) — Temani Afif, Dec 05 '17 at 19:04

CSS gradient border not showing correctly

3 Answers3

Linked

Related