2

I need border radius with gradient like below image. I have tried several ways but I am not getting output as required.

Tushar Kotlapure
  • 338
  • 6
  • 14

1 Answers1

1

Possibly this is a duplicate in 'Possible to use border-radius together with a border-image which has a gradient?' and has few use full tips there. How ever I found a simple solution from git hub for your problem,but it won't solve the issue entirely, since we can not make the background transparent with this CSS trick but only can have solid color or a gradient as you wish. The problem here is explained in one of the answer given to the above mentioned question. according to that we can not achieve the transparent backgrounds with border radius and gradients, since gradient effect applies as border-image property in CSS. Go refer to that problem and see the accepted answer. By the way here's the promised tricky solution.

body{
    padding: 10%;
    box-sizing: border-box;
}
.border-container{
    display: flex;
    width: 100%;
    height: 200px; /* to set the div visible, since without height it won't display if it does not have any elements inside */
    border: double 4px transparent;
    border-radius: 25px;
    background-image: linear-gradient(#fff,#fff ), radial-gradient(circle at top left, #ef1eef,#163ae0);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
<body>
    <div class="border-container">
        <!-- your elemnts -->
    </div>
</body>
Sanira Nimantha
  • 1,160
  • 1
  • 12
  • 29