Covering the border around the outside squares

HTML & CSS
1

I want to close in the outside border around the squares.

margin: 3px 0 0 3px;

image
image620×621 1.01 KB

Wait, it would start out as this then, right?
But this uses a negative margin.

margin: 0 0 3px -3px;

image
image619×632 1004 Bytes

I think I would be using some kind of nth of type formula to do this.

But now I’m confused.
@PaulOB

.wrape .wrapper li:nth-of-type(n+11) a {
  margin: ;
}

Everything I think would need to be shifted to the left 3px
and then shifted to the top or bottom 3px.

Keeping the spaces in-between.

Now I would only need to target the middle 3 cubes to separate them.
margin: 0 0 3px 0;
https://jsfiddle.net/zb6mkug3/447/

image
image615×615 985 Bytes

2

Use negative margins on the wrapper or its ul.

But as you fake the squares’ borders by using margins to show the background as borders, the fake outer borders will disappear.

Move the hidden rule to the wrapper or its ul and use real borders and see them cover the outside border, if you wish.

Matter solved in one post. :slight_smile:

1 Like
3

Update:

I think I got it here:

.wrape .wrapper li:nth-of-type(3n+2) a {
  margin: 0 3px 0 3px;
}

http://www.topdesignagencies.com/nth-test/
image

I did it:

image
image615×619 1001 Bytes

4

I think so too. :wink:

Keep experimenting and you will find more ways to do it. :slight_smile:

Like we all experimented in this dCode thread by @PaulOB:

3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.