JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="border1">

<p>
full width border top gradient
</p>

</div>

<p>
and...
</p>

<div class="border2">

<p>
gradient border with border radius
</p>

</div>

CSS

body {margin:0;}

.border1 {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-radius: 15px; /* this doesn't work */
  border-width: 6px 0 0 0;
  border-style: solid;
  padding: 10px;
}



.border2 {  
border-width: 6px;
border-style: solid;
border-color: transparent;
background: linear-gradient(white, white) padding-box, linear-gradient(to top right, darkblue, darkorchid) border-box;
border-radius: 20px;
padding: 10px;
}