Double border with different color

Question

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

User · Answer

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

User · Answer

Try below structure for applying two color border    lt div class  white  gt       lt div class  grey  gt       lt  div gt   lt  div gt    white       border  2px solid white         grey       border  1px solid grey

User · Answer

I use outline a css 2 property that simply works  Check this out  is simple and even easy to animate    x000D   x000D   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    x000D   lt div class  double-border  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use outline with outline offset    lt div class  double-border  gt  lt  div gt   double-border  background-color  ccc  outline  1px solid  f00  outline-offset  3px

User · Answer

Use of pseudo-element as suggested by Terry has one PRO and one CON    PRO - great cross-browser compatibility because pseudo-element are supported also on older IE  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    using outline property combined with border and a single inset box-shadow 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

User · Answer

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    x000D   x000D  body   x000D    background-image  linear-gradient 180deg   ccc 50    fff 50    x000D    background-repeat  no-repeat  x000D    height  100vh  x000D    x000D   double-border   x000D    background-color   ccc  x000D    border  4px solid  fff  x000D    padding  2em  x000D    width  16em  x000D    height  16em  x000D    position  relative  x000D    margin  0 auto  x000D    x000D   double-border before   x000D    background  none  x000D    border  4px solid  fff  x000D    content      x000D    display  block  x000D    position  absolute  x000D    top  4px  x000D    left  4px  x000D    right  4px  x000D    bottom  4px  x000D    pointer-events  none  x000D    x000D   lt div class  double-border  gt  x000D     lt  -- Content -- gt  x000D   lt  div gt  x000D   x000D   x000D    If you want borders that are consecutive to each other  no space between them   you can use multiple box-shadow declarations  separated by commas  to do so    x000D   x000D  body   x000D    background-image  linear-gradient 180deg   ccc 50    fff 50    x000D    background-repeat  no-repeat  x000D    height  100vh  x000D    x000D   double-border   x000D    background-color   ccc  x000D    border  4px solid  fff  x000D    box-shadow  x000D      inset 0 0 0 4px  eee  x000D      inset 0 0 0 8px  ddd  x000D      inset 0 0 0 12px  ccc  x000D      inset 0 0 0 16px  bbb  x000D      inset 0 0 0 20px  aaa  x000D      inset 0 0 0 20px  999  x000D      inset 0 0 0 20px  888  x000D       And so on and so forth  if you want border-ception    x000D    margin  0 auto  x000D    padding  3em  x000D    width  16em  x000D    height  16em  x000D    position  relative  x000D    x000D   lt div class  double-border  gt  x000D     lt  -- Content -- gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   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    x000D   lt div class  triple-border  gt Triple border bottom with multiple colours lt  div gt  x000D   x000D   x000D    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

User · Answer

Maybe use outline property       lt div class  borders  gt        Hello      lt  div gt        borders      border  1px solid grey       outline  2px solid white           https   jsfiddle net Ivan5646 5eunf13f

[css] Double border with different color

Examples related to css

Examples related to border

Examples related to less