Is this a Glitched Border or What?

[reesooyt]

At step 59 of New Front-End Developing >> Building A City Skyline (https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-59) I am met with a strange, tiny border imperfection.

What the hell does this derive from?

[bbsmooth]

Didn’t you just create that in step 58? Also, the height of the triangle is going to depend on the height of your view port (i.e. browser) since it uses vh units. Make your browser taller and that triangle will get taller. Or perhaps you are asking about something else?

UPDATE: OK, I think I see now, there seems to be a very slight inner top border (I didn’t notice this immediately). That’s because you have the following in your CSS:

* {
  border: 1px solid black;
  box-sizing: border-box;
}

This means that every div has a border around it. The .bb2a div is inside another div, so there are basically two top borders. You changed all but the top border for .bba2a, but that top border of 1px solid black is still there and that’s what you are seeing. The left and right border adjustments you made on .bb2a are causing that top border to appear a little funky.

[reesooyt]

Oh I understand what you’re saying, but I expected it to meet at the corners - it doesn’t. Instead, it just fades away into nothingness.

I know the adjacent left/right borders are transparent, but that shouldn’t affect the top one.

[reesooyt]

Perhaps it’s because the viewport is so small that “lossy compression” has to be done? (Some pixels are changed but are as close to the original image as possible)

[bbsmooth]

@reesooyt

but I expected it to meet at the corners - it doesn’t. Instead, it just fades away into nothingness.

It is meeting in the corners but because the side borders are so big (5vh) then it causes the border edges to meet at an angle and that’s why it appears that the top 1px border fades into the corner.

If you want to get a clearer picture of what is going on then add the following to .bb2a:

border-top: 20px solid blue;

Then start decreasing the size of the border a pixel at a time. You will see how the influence of the wider side borders affects the display of the smaller top border. Since the borders have different widths, the smaller one will be slightly distorted by the bigger ones, which is causing the fade phenomenon.