Border-issue in Chrome, pixelrendering?

Hi, I have a container that is 25% width in a responsive container with a maxwidth of 1024px. The 25% container is a slider containing a bunch of list-items that each is 100% width of the slider.

The thing is, on hover the list-items gets a 1px border all around. But at some screensizes the left-border disappears and the right border is 2px.

I have made a simple mockup on how it looks:

This is only on certain screen-sizes, like if i resize the window, it looks perfect, and then i resize a couple of pixels more, and BAM, border is messed up.

My guess is this is some pixelrendering-issue in Chrome? It seems to work fine in Safari and Firefox, havent tried IE.

Anyone have a solution or tips on how to fix this?

Mixing px and % is a dangerous thing sometimes, so you have to be careful. One thing you could try is adding this to your styles:

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

It’s best to provide a demo of issues you are facing so that people can test it out and see exactly what’s going on.