Double Border with Different Color

Double border with different color

Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:

body {  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);  background-repeat: no-repeat;  height: 100vh;}.double-border {  background-color: #ccc;  border: 4px solid #fff;  padding: 2em;  width: 16em;  height: 16em;  position: relative;  margin: 0 auto;}.double-border:before {  background: none;  border: 4px solid #fff;  content: "";  display: block;  position: absolute;  top: 4px;  left: 4px;  right: 4px;  bottom: 4px;  pointer-events: none;}

<div class="double-border">  <!-- Content --></div>

CSS double border (2 colors) without using outline?

You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1.
I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.

.border
{
    border:2px solid #36F; 
    position:relative;
    z-index:10
}

.border:before 
{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border:2px solid #36F
}

http://jsfiddle.net/fvHJq/1/

Is there is a possible way to fill color between css double border?

You could also use multiple box-shadows:

#element {  width: 100px;  height: 100px;  box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;}

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

How to give Double Border-right & left colors

Multiple boxshadows will work quite well here

JSfiddle Demo

CSS

div {
    border-color: grey;
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    height:100px;
    width:100px;
    margin:25px auto;
    box-shadow:-2px 0 0 0 red, 
                2px 0 0 0 green;
}

Adding a double border to a linear-gradient-filled-div colors the border too

You can manipulate box-shadow property... you can have more than one!

.colors {  width: 100px;  padding: 10px;  height: 50px;  background: linear-gradient(white, orange);  box-shadow:    inset 0 0 0 2px black,    inset 0 0 0 8px white,    inset 0 0 0 10px black;}

<div class="colors"></div>

How to create border bottom with 2 different color?

You can use css pseudo classes i.e :after or :before.

h3 {  margin: 0;  padding-bottom: 7px;  position: relative;  border-bottom: 2px solid #ccc;}
h3:before {  position: absolute;  background: brown;  height: 2px;  content: '';  width: 50px;  bottom: -2px;  left: 0;}

<h3>Last Recent Post</h3>

space between double borders

You can use box-shadow for making illusion of two borders around the element

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  padding: 8%;
  box-shadow: 0 0 0 1px #B38D6A, 0 0 0 5px #fff, 0 0 0 6px #B38D6A, 0 0 0 11px #fff;
}

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

Double Border with Different Color