JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<html>    
    <head></head>   
    <body>
        <div id="full-border">
            <p>test</p>
        </div>
    </body>
</html>

CSS

#full-border {
    background: none repeat scroll 0 0 #FF9600;
    border: 5px solid #FF0000;
    padding: 40px;
    position: relative;
    z-index: 10;
}
#full-border p:first-child:before {
    background: none repeat scroll 0 0 #7200FF;
    border: 5px solid #00B4FF;
    bottom: 15px;
    content:"";
    display: block;
    left: 15px;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: -1;
}
#full-border:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 5px solid #F000FF;
    bottom: 25px;
    content:"";
    display: block;
    left: 25px;
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: -1;
}
#full-border:before {
    background: none repeat scroll 0 0 #4AA929;
    border: 5px solid #FFEA00;
    bottom: 5px;
    content:"";
    display: block;
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: -1;
}

JavaScript

/* CSS - Multiple Borders with CSS 2.1 */