Geek asks and answers

Forced border crossing with overlapping border left / border

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 the top border to completely overlap the left and right borders at the intersection. At the moment, they are at an angle showing part of both and intersections.

Is there any way to do this?

+3
source share
1 answer

I believe that you can simply achieve this by using .box:before, as well as adding position:relative;to yours .box.

Fiddle

CSS

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

More articles:


All Articles