Search code examples
cssresponsive-designmedia-queries

Intentional border or padding overlap halfway for responsive tile view

I'm working with a responsive layout where the container has any number of "tiles" that automatically adjust their percentage based width depending on the screen size using media queries.

Each tile has a 10px border and I'm looking a reliable way to ensure there's always that 10px border. If I set the border to 10px then adjacent tiles end up having 20px between them. If I see it to 5px, the edge tiles end up having the thinner border than the rest, and etc.

What's a good method to style the tile to make borders overlap halfway without having to constantly adjust the edge tiles with javascript?

Note: I use a technique using width: % for width and padding-bottom: % for height of the tiles. It's a technique that works because padding bottom is based on the width. If you see to the same value it will be perfect square.

Solution

  • The answer was the following:

    ul#container{
     border: 5px solid white; /*Half border*/
}

ul#container li.tile {
     outline: 10px solid white;  /*Full border*/
     outline-offset: -5px solid white;  /*Negative Half border*/
}

    An alternative way I found that worked a bit better in my case (decided to use isotope.js for responsive tiles) was the following:

    li.tile {
    border: 10px solid white;
    margin-right: -10px; 
    margin-bottom: -10px;
}