cssborderlinear-gradientsborder-radiusborder-image

top-border with linear-gradient and radius


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>


Solution

  • 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;
    }