CSS - Need 'Triple' Border

How to create a triple overlapping border with CSS?

You can consider linear-gradient that you can scale indefinitely to have as many border as you want. It may look complicated but you will see that all the gradient will have the same size (4px) so [100% 4px] for the horizontal ones and [4px 100%] for the vertical ones. Then for the position we remove/add 8px (or any value) each time to offest between each gradient.

.dtborder {  position: relative;  height: 200px;  width: 300px;  background:  /*First border*/  linear-gradient(red,red) 0 100%/100%  4px, /*Bottom*/  linear-gradient(red,red) 0 0/100%  4px ,   /*Top*/  linear-gradient(red,red) 0 0/4px 100% ,    /*left*/  linear-gradient(red,red) 100% 0/4px 100%,  /*right*/  /*Second border*/  linear-gradient(blue,blue) 0 calc(100% - 8px)/100%  4px ,  linear-gradient(blue,blue) 0 8px/100%  4px,  linear-gradient(blue,blue) 8px 0/4px 100%,  linear-gradient(blue,blue) calc(100% - 8px) 0/4px 100%,  /*third border*/  linear-gradient(green,green) 0 calc(100% - 16px)/100%  4px,  linear-gradient(green,green) 0 16px/100%  4px,  linear-gradient(green,green) 16px 0/4px 100%,  linear-gradient(green,green) calc(100% - 16px) 0/4px 100%;  /*And so on ...*/  background-repeat:no-repeat;  padding: 30px;}

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

Css - Need 'triple' border

Consider using box-shadow. You can also do it with multiple box-shadow :

.box {  border: 5px solid #00ff60;  outline: 5px solid #000;  outline-offset: 0px;  height: 100px;  width: 100px;  box-shadow:0px 0px 0px 5px #000 inset;  display:inline-block;}
.box-alt {  border: 5px solid #000;  outline: 5px solid #00ff60;  outline-offset: 0px;  height: 100px;  width: 100px;  box-shadow:0px 0px 0px 10px #000;  margin:10px 20px;  display:inline-block;}
.box-alt-2 {  height: 100px;  width: 100px;  box-shadow:0px 0px 0px 5px #000,  0px 0px 0px 10px #00ff60,  0px 0px 0px 15px #000;  margin:10px 20px;  display:inline-block;}

<div class="box"></div>
<div class="box-alt"></div>
<div class="box-alt-2"></div>

Is it Possible to Draw a Triple Border only on one side of a Rectangle?

Using this CSS Property

box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;

#element {  width: 100px;  height: 100px;  box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;}

<div id="element"></div>

How to create triple div border in CSS

use this css http://jsfiddle.net/PESHk/3

#myborder {
    box-shadow: 0 0 0 4px  green, 0 0 0 4px  green inset;
    border-top:2px solid red;
    padding:8px;
}

2 or 3 line border in html,css,bootstrap

Here's an approach for how to achieve this :

/*-- Style example 1 --*/.container{   background-color: #DFBA8A;   display: inline-block;   border: 5px solid #8ECE8E;   padding: 5px; }
.inner{   border: 5px solid #CACE8E;   background-color: #BBBF00 ; }
h1{   color: #FFF;   text-align: center;   margin: 15px 20px; }
/*-- Style example 2 --*/.container-2{   margin-top: 10px;   background-color: #BBBF00;   display: inline-block;   padding: 6px; }
.inner-2{   border: 5px solid #CACE8E; }
h1{   color: #FFF;   text-align: center;   margin: 15px 20px; }

<!-- Example 1 --><div class="container">   <div class="inner">     <h1>WE ARE THE SKOOL</h1>   </div></div>
<!-- Example 2 --><div class="container-2">   <div class="inner-2">     <h1>WE ARE THE SKOOL</h1>   </div></div>

CSS, border-top with 3 colors, is possible?

You can use background-gradient too wich is alike image : (maybe a duplicate see
Is it possible to change the color of a border every 75px? )

Here it could be :

element {
   background:
     linear-gradient(
       to left,
       red 0, 
       red 33.3%,
       orange 33.3%, 
       orange 66.6%, 
       blue 66.6%, 
       blue )no-repeat;
   background-size:100% 3px ;
   padding-top:3px;
 }

http://codepen.io/anon/pen/lAsvw

how can I put 3 internal borders to a single div with differents width and border-color? should I create 3 divs and each one with its own properties?

As the borders are purely decorative you could use pseudo before and after elements to produce the white and green rather than put extra elements into the actual HTML.

This snippet sets the width of the green and while borders and the distance between the whole thing and the edge of the viewport as CSS variables and uses CSS calc function to place a white before pseudo element and a green after pseudo element behind the black one. That way you can get 3 different radii as required.

Obviously you will want to change the radii in this code to suit your particular need.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background: black;
}

.borders {
  --greenW: 30px;
  --whiteW: 10px;
  --edge: 20px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - (2 * (var(--greenW) + var(--whiteW) + var(--edge))));
  height: calc(100% - (2 * (var(--greenW) + var(--whiteW) + var(--edge))));
  border-radius: 10px;
  color: white;
  font-size: 10vw;
  font-family: sans-serif;
  font-weight: bold;
  position: relative;
  left: calc(var(--whiteW) + var(--greenW) + var(--edge));
  top: calc(var(--whiteW) + var(--greenW) + var(--edge));
}

.borders::before {
  content: '';
  display: inline-block;
  width: calc(100% + (2 * var(--whiteW)));
  height: calc(100% + (2 * var(--whiteW)));
  background-color: white;
  border-radius: 10px;
  position: absolute;
  top: calc(-1 * var(--whiteW));
  left: calc(-1 * var(--whiteW));
  z-index: -1;
}

.borders::after {
  content: '';
  display: inline-block;
  width: calc(100% + (2 * (var(--whiteW) + var(--greenW))));
  height: calc(100% + (2 * (var(--whiteW) + var(--greenW))));
  background-color: green;
  position: absolute;
  top: calc(-1 * (var(--whiteW) + var(--greenW)));
  left: calc(-1 * (var(--whiteW) + var(--greenW)));
  border-radius: 40px;
  z-index: -2;
}

<body>
  <div class="borders">Growth</div>
</body>

</html>

CSS Border on three sides

border: 1px solid green;
border-top: 0;