Border the Hexagon

Code Help HTML/CSS/JS
1

I am trying to make every hexagon have a border but it doesn’t work. Please help me fix my code.

border:10px solid #cccccc;
border-radius:5px;

https://replit.com/@HexHands/CluelessPreciousOperation

Thanks!

2

I don’t see a border of color #cccccc anywhere in your CSS…

1 Like
3

I removed it because it did not work.

4

We can’t help you if the code that isn’t working isn’t there…

5

Now the code is there.

6

Congratulations, you have discovered the nuances of making CSS modifications via ::before and ::after in coordination with absolute positioning! The reason why it doesn’t work is that the hexagons are technically squares. I’d recommend getting either a combination of rotated “rectangles” which “legally” (as in recognised by CSS) form a hexagon.

2 Likes
7

This might help: Create Hexagon shape with Border - HTML CSS CSS Widget