How to create a border that fully covers the adjacent corners in CSS?

Question

I have a div with a 1px border and I\'m trying to create a 3px border in another color to that div. I\'m using this code:

box {
  border: 1px solid #ffffd;
  b         


        

Answer 1

You could draw these with inset shadows and padding :

div {
  padding:12px 5px 5px;
  width: 40%;
  height: 200px;
  box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px  gray
}

or just an outset top shadow

div {
 
  width: 40%;
  height: 200px;
  border:2px solid gray;
  border-top:none;
  box-shadow:  0 -10px #3F9BD0;
  margin-top:12px;
}

else, background gradient could be used and even animated 2 examples : http://codepen.io/gc-nomade/pen/IGliC or http://codepen.io/gc-nomade/pen/pKwby