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

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

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

Choice 2:

Use linear-gradient().

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ffffd;
  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%);
}