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  

.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  */
}

Comments 2

  • Kavin
    Kavin

    Great and nice post

    Admin Reply : Thankyou

  • Ashish
    Ashish

    Very good explanation

    Admin Reply : Thanks

Reply