设置边框半径时会显示白色边框

Question

I'm working with the react material-ui framework and when I try to set border-radius for the background <div> of the circle svg a narrow white border is displayed in Chrome.

Does any one know How I can hide this white border and make the stroke edge smooth and sharp?

I set this css code:

svg {
  border-radius: '50px';
  background-color: white;
}

and here is the sample code that I work on: Code Pen link

Answer 1

Try to add:

svg {
  shape-rendering: optimizeSpeed;
}