Градиент границы исчезает на экране с большим разрешением

Question

Когда я уменьшаю свой экран, границы исчезают с некоторых сторон. Я предполагаю, что это потому, что заполнение 0.05rem слишком мало для обнаружения на экранах с высоким разрешением. Есть ли хороший способ исправить это?

CodePen

body {
  background: black;
}

.module-border-wrap {
  max-width: 250px;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 0.05rem;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

<div class="module-border-wrap">
  <div class="module">
    Lorem ipsum dolor
  </div>
</div>

100% увеличение:

90% увеличено:

Answer 1

Я бы оптимизировал код, используя один элемент и несколько фонов.Не уверен, решит ли это проблему на вашей стороне, но с моей стороны все в порядке:

body {
  background: black;
}

.module {
  background: 
    linear-gradient(#222, #222) padding-box, 
    linear-gradient(to right, red, purple) border-box;
  color: white;
  border: 0.05rem solid transparent;
  padding: 2rem;
  max-width: 250px;
}

<div class="module">
  Lorem ipsum dolor
</div>