.border_UsingElement{

    padding:20px;
    border:2px solid #000; /* First Border  */
    position:relative;
}
.border_UsingElement::before{
    position:absolute;
    width:100%;
    height:100%;
    content:"";
    border:2px solid #f00; /* Second Border  */
}

2) Using box-shadow

#HTML

Multiple Border Using box-shadow

#CSS

.border_UsingBoxShadow{
    padding:20px;
    margin:10px;
    border:2px solid #000; /* First Border  */
    position:relative;
    box-shadow:0px 0px 0px 5px #f00; /* Second Border  */
}

">

Multiple Borders in a box Using CSS

Lets see how to we can design a box with multiple border. Here have two type of way to make this type of border

1. Using pseudo element(::before, ::after)
2. Using box-shadow

1) Using pseudo element(::before, ::after)

#HTML

Multiple Border Using pseudo element(::before,::after)

#CSS

.border_UsingElement{

    padding:20px;
    border:2px solid #000; /* First Border  */
    position:relative;
}
.border_UsingElement::before{
    position:absolute;
    width:100%;
    height:100%;
    content:"";
    border:2px solid #f00; /* Second Border  */
}

2) Using box-shadow

#HTML

Multiple Border Using box-shadow

#CSS

.border_UsingBoxShadow{
    padding:20px;
    margin:10px;
    border:2px solid #000; /* First Border  */
    position:relative;
    box-shadow:0px 0px 0px 5px #f00; /* Second Border  */
}