Gradient border

by Roberto Apasajja

HTML

<h2>Using background of parent div</h2>

<div class="aaaa">
  <div class="bbbb">Lorem ipsum dolor sit amet</div>
</div>

<div class="cccc">
  <img class="yyyy" style="width:90px" src="https://ucarecdn.com/2942475e-92c0-4394-b4d3-c40b2755585b/" alt="">
</div>

<h2>Using slice (not works with border-radius)</h2>

<div class="hhhh">dsfdsdfsfdsf</div>

CSS

.aaaa {
  width: 250px;
  position: relative;
  background: linear-gradient(to right, purple, teal);
  padding: 5px;
  border-radius:9px
}
.bbbb {
  background: grey;
  padding: 9px;
  border-radius:5px
}

.cccc {
  padding:0;margin:0;
  width: fit-content;
  position: relative;
  background: linear-gradient(to top, #743ad5, #d53a9d);
  padding: 5px 5px 0 5px;
  border-radius: 9em;
}
img.yyyy {
  padding:0;margin:0;
  border-radius: 9em;
}

.hhhh {
  border: 10px solid;
  border-image-source: linear-gradient(90deg, green, blue);
  border-image-slice: 1;
}