CODEWITHSUNDEEP
cssjquery-mobileborder
Matt McDonald
Matt McDonald

Reputation: 5050

Strange border effect

I'm coming across an issue that I feel like I've found (and solved) before. But can't remember what or how.

I'm using jQuery Mobile and re-skinning it majorly. Part of this is putting a solid thick line at the bottom of the nav items. So I've overridden the borders so I have a left and right 1px border, then a 10px bottom border. But the bottom border is jagged, it looks like the left and right are trying to come over half of the bottom border but not all of it.

I've attached a screenshot of the problem (I've increased bottom-border to 25px to make it more obvious).

 #id
   {
     border: #231F20 1px solid;
     border-top: none;
     border-bottom: #EE1E5C 25px solid;
   }

Any ideas where this problem is coming form and how to solve?

screenshot

Upvotes: 0

Views: 139

Answers (1)

Gareth
Gareth

Reputation: 5719

It's because the border edges don't meet in straight horizontal or vertical lines, but in diagonals starting at the corner of the inner box and finishing at the corner of the box including the borders (in this case that means the border finishes one pixel to the left and right of where it starts). If you changed your side borders to be wider it'd be clearer what's happening.

Here's a quick image to illustrate:

border joins

The borders join along the red lines.

As to a solution - you may need an extra element to wrap to provide that bottom border, or get rid of your 1px side borders. Neither are ideal solutions I'm afraid.

Upvotes: 1

Related Questions