How to get the top edge of the div to overlap the top end of the right edge?

Question

I’m trying to get the top edge of the div totally overlap the top tip of the right edge, but I’m not succeeding.

html

<div class="caixa"></div>

css

.caixa{
    width:100px;
    height:100px;
    border-top:14px solid red;
    border-right:14px solid blue;
}

See in the example below that the edges in the upper right corner of the div meet diagonally, I would like the upper edge to fully cover the upper right corner.

http://jsfiddle.net/zNkcV/

Answer 1

Using pseudo-element .caixa::after, it is possible to obtain the desired effect:

.caixa{
width:100px;
height:100px;
border-top: 14px solid red;
position: relative;

}

.caixa::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0px; left: 0; right: 0;
    border-right: 14px solid blue;
}

JS Fiddle