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 #ddd;   border-top: 3px solid #3F9BD0; } 

but at the corners the border is not good, see image:

How can I make this border look good, like this:

fiddle: https://jsfiddle.net/15tory3z/

Answer 1

Instead of border-top, try using the :after pseudo-element to recreate the effect you want.

.box {    width: 200px;    height: 100px;    border: 1px solid #ddd;    position: relative;  }  .box:after {    position: absolute;    content: "";    width: 100%;    height: 5px;    top: -5px;    background: dodgerblue;    padding: 1px;    left: -1px;  }

<div class="box"></div>

Choice 2:

Use linear-gradient().

.box {    width: 200px;    height: 100px;    border: 1px solid #ddd;    background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);    background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);    background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);    background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);    background: linear-gradient(top, dodgerblue 5%, #fff 5%);  }

<div class="box"></div>

Answer 2

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  }

<div></div>

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;  }

<div></div>

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