Pure CSS double and triple borders

• Tweet

• Tweet

G’Day,

Everyday we learn something and everyday we practise “Experiments”. I do that sort of stuff for fun all the time. This is sort of my favourite past time. Anyways as I am still doing some experiments with pseodu elements I thought I should give you this cool CSS trick that you can use safely in all major browsers

lets take a look at the CSS first

The CSS for Double borders

.dtborder {
   position:relative; /*important! */
   border:5px solid #000;
   height:200px;
   width:200px;
   background: #f9f9f9;
   padding:30px;
   border-radius: 10px;
}
.dtborder:before {
  content:"";
  position: absolute;
  /*set margins in other words its positioning our added pseudo content*/
  top:5px;
  bottom:5px;
  left:5px;
  right:5px;
  border:5px solid #999;
   border-radius: 8px;
}

The Markup

<div>
      This text appears inside a double bordered div 
      where you can control the gap between border lines.
</div>

Demo

http://jaspreetchahal.org/examples/css-examples/double-css-borders.html

Result

lets now add one more border line to our above div

No need to change the markup but instead use the CSS below

The CSS for Triple borders

.dtborder {
   position:relative;
   border:5px solid #000;
   height:210px;
   width:210px;
   background: #f8f8f8;
   padding:30px;
   border-radius: 9px;
}
.dtborder:before {
  content:"";
  position: absolute;
  top:5px;
  bottom:5px;
  left:5px;
  right:5px;
  border:5px solid #999;
   border-radius: 8px;
}
 
.dtborder:after {
  content:"";
  position: absolute;
  top:15px;
  bottom:15px;
  left:15px;
  right:15px;
  border:5px solid #666;
  border-radius: 8px;
}

Demo

http://jaspreetchahal.org/examples/css-examples/triple-css-borders.html

Result

So our result now will look like this

Important thing in above piece of CSS is element padding to give enough room for our borders.

I hope this was an exciting read for you.

Cheers

Advertisement