Multiple Borders in a box Using CSS

Multiple Borders in a box Using CSS

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

">

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  */
}
About the author
Code solution

info@codesolution.co.in

Discussion
  • 0 comments

Add comment To Login
Add comment