Web development

CSS Multiple Borders

CSS Multiple Borders

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).


*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:


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


.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!

Read also:

Scroll Indicator

CSS Cyclist /Bike Animation

CSS Shake Animation