top-border with linear-gradient and radius

Question

I try to create a only top border with linear-gradient and radius. I did top border but i can not execute radius. It is possible to make this?

I want to have curved corners on top border with linear-gradient

   .grid-area{
      background-color: hsl(227, 47%, 96%); 
      text-align: center;
      padding: 20px 0;
      cursor: pointer;
      border-radius: 5px;
    }
    
    .grid-area-4{
      grid-area: grid-area-4;
      border-style: solid;
      border-image: linear-gradient(to right, hsl(37, 97%, 70%) , hsl(329, 70%, 58%)) 1/3px;
      border-image-slice: 100 0 0;
    }

<div class="grid-area grid-area-4"><p>Some text</p></div>

Answer 1

Do you mean you want to place a gradient on top, while the rounded corners are not being cut off by the gradient? Then this might be an approach

.grid-area{
    position:relative;
    background-color: hsl(227, 47%, 96%); 
    text-align: center;
    padding: 20px 0;
    cursor: pointer;
    border-radius: 5px;
}
.grid-area-4 {
    grid-area: grid-area-4;
    background-image: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    background-position:top;
    background-size:100% 5px;
    background-repeat:no-repeat;
}