Is it possible to make a gradient border?

You can try this:

div {
  width: 170px;
  height: 48px;
  border-radius: 24px;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(to bottom, #fff042, #ff5451);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

<div>button</div>

may be other work for you but i have very simple tips for you just replace background-image to border-image like

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
background-color:#124f7e;

border-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
border-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
border-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
border-color:#124f7e;

Here's a solution that creates a colorful gradient border, like you can see at the top of sites such as Gumroad or Vimeo, e.g.:

<div class="u-border-top-rainbow">Lorem ipsum fu fu ma li ma coco go yo.</div>

.u-border-top-rainbow {
  border-style: solid;
  border-width: 30px 0 0 0;

   /* For a gradient repeated 3 times */
  border-image-source: repeating-linear-gradient(to right,
    hsla(   8,  78%, 63%, 1.00 ) 00.00%,
    hsla(   8,  78%, 63%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 33.33%
  );

  border-image-slice: 1;
}

Codepen: Colorful CSS gradient border, à la Gumroad or Vimeo

The gradient could be written in half the size with the double stop notation, in this fashion:

background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

…unfortunately, such syntax is not supported by Safari as of yet.

Just use ::before

.card::before{
           content: '';
          width: 100%;
          position: absolute;
          height: 5px;
          top:0;
          left: 0;
          border-radius:5px 5px 0 0;

          background-color: hsl(195, 100%, 50%);
    }