<div class="border">CSS Multiple Borders</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;  
}

.border {
   position: relative;
   z-index: 1;
   padding: 95px;
   border: 5px solid #231942;
   background-color: #5e548e;
}

.border::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #9f86c0;
   background: #be95c4;
}

.border::after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #e0b1cb;
   background: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.