like below fixes the issue Easy way: Another container You can't do this with traditional HTML borders as they work at shown above (that's how CSS triangles work!). The easiest way to get this effect is to wrap the element in another container.
border-top:10px solid red;
border-bottom:10px solid red;
/* pad out the left and right to allow room for the border */
help you fix your problem I'm building a simple website, and on its landing page I need two backgrounds. For that, I'm using two divs, one on top of the other. So far so good. , Not the best way to do this