CSS Multiple Borders - Lena Design

We can achieve the CSS multiple border effect by using the :after and :before pseudo-classes (you can read more about CSS Pseudo-elements here).

Example:

*to see how the CSS multiple borders are looking on the website click here.

To achieve the CSS multiple borders effect follow the steps below and watch the video tutorial:

Add HTML

<div class="border">Type your text here.</div>

Add CSS

.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;
}

Watch also the video tutorial:

Enjoy coding!

Share this: