CodeSolution

Please wait...

Multiple Borders in a box Using CSS

Multiple Borders in a box Using CSS

@HTML  @ CSS  @ Multiple border  @ box border  @ 2 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

<div class="border_UsingElement"> Multiple Border Using pseudo element(::before,::after)</div>

#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

<div class="border_UsingBoxShadow"> Multiple Border Using box-shadow </div>

#CSS

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

Comments 0

Reply

>