Liebe Gemeinschaft,

folgendes Problem habe ich:

In CSS möchte ich einen Rand um einen HTML Container ziehen.

HTML:
Code:
<div class="box"></div>
In CSS dann:

Code:
.box {
border: 10px solid;
}
Dieser Rand einer Box wird in Firefox dargestellt, wie es sein soll: (Ein 20 Pixel breiter Balken, bzw. geschlossene Box.).

Jedoch: In Chrome, Edge, Opera oder Vivaldi entsteht eine Art "Artefakt":
Eine weiße Linie durchzieht den Balken/geschlossene Box. Sie hat in etwas die Dicke eines halben Pixels. Ziehe ich die Box auf eine Größe von beispielsweise 300 Pixel und platziere darin farbige Flächen ist diese "weiße Linie" oben und links, jedoch nicht rchts und unten zu sehen. Hier schließen sich die Farbflächen nahtlos an den Rand der Box an.

Ich bin Anfänger und verstehe nicht, warum Firefox alles richtig darstellt und die anderen Browser eben nicht. Bei anderen Systemen in einem Tutorial beispielsweise sind in einem der besagten Broswer dieses Artefakt nicht zu sehen (Chrome).

Könnt ihr mir weiter helfen? Das wäre wirklich klasse! Ich habe niemanden, den ich sonst fragen könnte...

Grüße
Prealudium