Problem z borderem

pytanie zadane 6 kwietnia 2021 w HTML i CSS przez Bakkit Dyskutant (7,600 p.)
edycja 6 kwietnia 2021 przez Bakkit

Cześć, mam taki border na stronie:

Niezamierzonym efektem jest to, że pomiędzy niebieskim tłem a niebieskim borderem jest cienka ciemna linia.

CSS:

.rank-menu {
        display: flex;
        justify-content: center;
        align-items: center
        .rank-menu-item {
            width: 50%;
            text-align: center;
            border: 2px solid $blue;
            cursor: pointer;
            span {
                text-transform: uppercase;
                letter-spacing: .44px;
                font-weight: bold;
                padding: 18px 2px;
                font-size: 13px;
                display: block;
                transition: 0.5s all linear;
                &:hover {
                    background-color: $blue;
                    text-decoration: none;
                    color: $dark;
                }
            }
            span.active {
                background-color: $blue;
                text-decoration: none;
                color: $dark;
            }
        }
    }

Oraz html:

<div class="rank-menu">
        <div class="rank-menu-item"> <span class="active"> Ranking </span> </div>
        <div class="rank-menu-item"> <span> Zabójstwa </span> </div>
        <div class="rank-menu-item"> <span> Śmierci </span> </div>
    </div>

Edit:

Zauważyłem, że przy przybliżaniu przeglądarki do 175% problem znika.

1	komentarz 6 kwietnia 2021 przez lateM Pasjonat (17,660 p.) Wklej cały kod, HTML również.

komentarz 6 kwietnia 2021 przez Bakkit Dyskutant (7,600 p.)

Zrobione

komentarz 6 kwietnia 2021 przez lateM Pasjonat (17,660 p.)

Pousuwaj przerwy między tagami, odśwież stronę przy pomocy Ctrl+F5?

1 odpowiedź

odpowiedź 13 kwietnia 2021 przez VBService Ekspert (253,140 p.)
wybrane 18 kwietnia 2021 przez Bakkit

Najlepsza

Propozycja zmian

<div class="rank-menu">
  <div class="rank-menu-item active">Ranking</div>
  <div class="rank-menu-item">Zabójstwa</div>
  <div class="rank-menu-item">Śmierci</div>
</div>

* {
  box-sizing: border-box;
}
:root {
  --color-blue: #20789e; /* $blue */
  --color-dark: black;   /* $dark */
}
body {
  background-color: var(--color-dark);
}
.rank-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rank-menu-item {
  width: 33%;
  text-align: center;
  border: 2px solid var(--color-blue);
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.44px;
  font-weight: bold;
  padding: 18px 2px;
  font-size: 13px;
  transition: 0.5s all linear; 
  margin: 0;
  color: var(--color-blue);
}
.rank-menu-item:hover {
  background-color: var(--color-blue);
  text-decoration: none;
  color: var(--color-dark);
}

.rank-menu-item.active {
  background-color: var(--color-blue);
  text-decoration: none;
  color: var(--color-dark);
}