0

Hi I have a div which has differently colored borders, and one thing I happened to notice is that border-left and border-right get drawn over border-top.

The sample html is just:

<div class="my_class"></div>

With CSS:

div {
  height: 100px;
  width: 100px;

  border: thin solid;
  border-top: thick solid;

  border-color: #eeeeee;
  border-top-color: #123456;
}

This is an example of what I'm talking about: http://jsfiddle.net/nsVca/1/

Both the side borders overlap the top border. Is there a way to overrule this or to set the top border to draw over the side borders?

user3358302
  • 1,561
  • 2
  • 9
  • 10
  • This has been asked before. Try this solution: http://stackoverflow.com/a/18836383/3781678 – Feek Jul 30 '14 at 07:39
  • Ah crap sorry, I'll try these solutions and if it's good I'll delete this. – user3358302 Jul 30 '14 at 07:41
  • UPDATE: After going through multiple solutions, I found the cleanest solution was using `box-shadows` which was in this stackoverflow question: http://stackoverflow.com/questions/7261703/set-css-border-to-end-in-a-90-instead-of-a-45-degree-angle – user3358302 Jul 30 '14 at 22:58

0 Answers0