<div class="sample01">
  SAMPLE01
</div>

<div class="sample02">
  <p>SAMPLE02</p>
</div>

<div class="sample03">
  <p>SAMPLE03</p>
</div>
.sample01 {
  border: 2px solid rgb(78 90 195);
  border-image: linear-gradient(to right, #db6448, #c32d91,#f1ae59);
  border-image-slice:1;
  padding:10px;
  width:250px;
  text-align:center;
  margin:2rem auto 4rem;
}

.sample02 {
  text-align:center;
  margin:2rem auto 4rem;
}

.sample02 p {
  border-bottom: 2px solid #14cff3;
  border-image: linear-gradient(to right, #14cff3, #4460FF);
  border-image-slice:1;
  padding:10px;
  display:inline;
}

.sample03 {
  text-align:center;
  margin:2rem auto 4rem;
}

.sample03 p {
  border-left: 6px solid #FFCB9C;
  border-image: linear-gradient(to top, #FFCB9C, #fe859c);
  border-image-slice:1;
  padding:5px 10px;
  display:inline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.