JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="radius">
  <div class="gradient-border-bg">f x xcf x bdbdsb</div>
</div>

CSS

body {
  background-color: #fff;
}

.radius {
  border-radius: 20px;
  overflow: hidden;
}

.gradient-border-bg {
  border: 5px solid;
  border-image: linear-gradient(45deg, purple, orange) 1;
  padding: 1rem;
  border-radius: 20px;
}