Covering the border around the outside squares

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

margin: 3px 0 0 3px;

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

margin: 0 0 3px -3px;

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

But now I’m confused.

.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;

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


I think I got it here:

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

I did it:

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:


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