[css] Double border with different color

With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.

On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?

NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?

And if I put border-style: double then you know I can't pass two different color for the singe double border.

div.white{
       border: double white grey;
}

Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.

Try below structure for applying two color border,

<div class="white">
    <div class="grey">
    </div>
</div>

.white
{
    border: 2px solid white;   
}

.grey
{
    border: 1px solid grey;   
}

Use of pseudo-element as suggested by Terry has one PRO and one CON:

1. PRO - great cross-browser compatibility because pseudo-element are supported also on older IE.
2. CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.

Anyway is a great solution.

OTHER SOLUTIONS:

If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:

1. using outline property combined with border and a single inset box-shadow
2. using two box-shadow combined with border.

Here a jsFiddle with Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-border class):

.left
{
  outline: 4px solid #fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.right
{
  box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}

LESS code:

You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with @variable.

Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):

@double-border-size:4px;
@inset-border-color:#fff;
@content-color:#ccc;

.double-border 
{
  background-color: @content-color;
  border: @double-border-size solid @content-color;
  padding: 2em;
  width: 16em;
  height: 16em;
  float:left;
  margin-right:20px;
  text-align:center;
}

.left
{
  outline: @double-border-size solid @inset-border-color;
  box-shadow:inset 0 0 0 @double-border-size @inset-border-color;
}

.right
{
  box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color;
}

You can use outline with outline offset

<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}

Maybe use outline property

    <div class="borders">
      Hello
    </div>

    .borders{
    border: 1px solid grey; 
    outline: 2px solid white;
     }

https://jsfiddle.net/Ivan5646/5eunf13f/

You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:

.triple-border:after {_x000D_
    content: " ";_x000D_
    display: block;_x000D_
    width: 100%;_x000D_
    background: #FFE962;_x000D_
    height: 9px;_x000D_
    padding-bottom: 8px;_x000D_
    border-bottom: 9px solid #A3C662;_x000D_
    box-shadow: -2px 11px 0 -1px #34b6af;_x000D_
}

<div class="triple-border">Triple border bottom with multiple colours</div>

You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.

I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:

.double-border {_x000D_
  display: block;_x000D_
  clear: both;_x000D_
  background: red;_x000D_
  border: 5px solid yellow;_x000D_
  outline: 5px solid blue;_x000D_
  transition: 0.7s all ease-in;_x000D_
  height: 50px;_x000D_
  width: 50px;_x000D_
}_x000D_
.double-border:hover {_x000D_
  background: yellow;_x000D_
  outline-color: red;_x000D_
  border-color: blue;_x000D_
}

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

you can add infinite borders using box-shadow using css3 suppose you want to apply multiple borders on one div then code is like:

div {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
}