<div class="card">
  <div class="gradient-border">
    <div class="content-wrapper">Hey, nice border!</div>
  </div>
</div>
.card {
  margin: 2rem auto;
  width: 350px;
}

.gradient-border {
  background-image: linear-gradient(45deg, #ff8a00, #e52e71);
  border-radius: 16px;
  padding: 10px;
}

.content-wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  padding: 35px;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.