CODEWITHSUNDEEP
cssborder
user1087185
user1087185

Reputation: 106

Force border-top to overlap border-left/border-right

Here is the fiddle: http://jsfiddle.net/3Ys2d/

CSS

div{
    border: solid 3px blue;
    border-left-color: red;
    border-right-color: red;
    width: 100px;
    height: 50px;
}

I need to have the top border overlap the left and right borders completely at the intersection. At the moment they are on an angle showing part of both and the intersection.

Is there a way to do this?

Upvotes: 5

Views: 3244

Answers (1)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

I believe that you can just achieve that by using .box:before and also by adding position:relative; in your .box .

Fiddle

CSS

.box:before{
    content:"";
    position:absolute;
    border-top:3px solid green;
    width:106px;
    left:-3px;
    top:-3px;
}

Upvotes: 4

Related Questions