CSS different border borders overlap

Question

I'm having trouble overlapping borders due to different border widths.

Here is a sample code of my problem: http://jsfiddle.net/u7KhX/

.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9; 

As you can see, the purple part is not complete.

Any ideas?

Answer 1

You can make the top border a perfect rectangle and still have other borders the way you want using the div ::after pseudo-element.

Place the top border on the div itself and the other three on the pseudo-element.

For instance:

 .border { width: 200px; height: 200px; border-top:5px solid #894b9d; padding: 0 1px 1px 1px; position:relative; } .border::after { display:block; content:''; position:absolute; top:0; left:0; width:200px; height:200px; border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px; } 

See the updated script .

Edit:
Or if you do not want to rely on a given width and height, for example:

 .border { display:inline-block; position:relative; padding:.5em; border-top:5px solid #894b9d; } .border::after { display:block; content:''; position:absolute; top:0; left:0; width:100%; height:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px; } 

I made this an inline block to show that it works great with dynamic content sizes, but you can work with all types of widths.

newer script .

Answer 2

The specification is rather vague, but all browsers implement it the same way:

Wherever there are 2 borders, there will always be a steep diagonal line.

---

This was well used when creating triangle and other shapes in pure CSS. Check out this gallery:

CSS Forms by Chris Coyer.