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

Welcome to the css borders. The only way to properly do that is using :after or :before pseudoelements.

Fiddle

.box {
    border: 1px solid #ffffd;
    position: relative;
}
.box:after {
    position: absolute;
    display: block;
    content:'';
    /* Positioning */
    top: 0;
    width: 100%;
    height: 3px;
    left: 0;
    right: 0;
    /* Color */
    background-color: #3F9BD0;
}