How do I put multiple borders around the text in CSS?

Answer 1

There is a way to add 3 borders to an element by adding the border to the HTML element itself, then to the pseudo selectors :before and :after.

.multiple-borders {

border: solid 1px red;

position: relative;

}

.multiple-borders:before {

content: " ";

position: absolute;

z-index: -1;

top: -5px;

left: -5px;

right: -5px;

bottom: -5px;

border: 1px solid blue;

}

.multiple-borders:after {

content: " ";

position: absolute;

z-index: -1;

top: -10px;

left: -10px;

right: -10px;

bottom: -10px;

border: 1px solid green;

}