Does border always leave some space for content-CodePudding

I need to address an accessibility issue where in the high contrast mode, my solid circle is not visible because the backgournd color gets removed. I tried to use border to fill the circle like in this: https://codepen.io/dala1/pen/oNGzdKb

.circle {
  height: 0;
  width: 0;
  border-width: 10px;
  border-style: solid;
  border-radius: 100%;
  border-color: red;
}

However, there is always a small empty hollow inside. Does the border always leave some space for content? Is there a way to remove the hollow?

CodePudding user response：

Instead of making the border fill your circle, you can directly set the background color of the circle like so:

.circle {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 100%;
}

<div >
</div>

By using the border it may leave a circle in the middle if your circle diameter is larger that the border width combined. In this case, the solution is not to use the circle border to fill in the circle, but rather to set the circle's background color.

CodePudding user response：

We can in increase the border-width: 20px;. So it will the gap.