circular border-radius artifacts in css - html

Question

I am using react and have a circle component that I want to map on the screen. The problem is at certain view sizes I get small artifacts in the circles. Flat ends and only on certain rows of circles.
Circles have flat sides at view width 980px
ball hitbox
container hitbox
.ballholder{
display:flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color:rgb(206,35,212);
padding:0.5vw;
border-radius: 5%;
border:2px solid black;
}
.aball{
background-image: linear-gradient(to bottom right, white, whitesmoke, rgb(150,150,150));
color:black;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
width:2vw;
height:2vw;
padding:0.05vw;
margin:0.20vw;
font-size:1.3vw;
}
Here's the parent component:
import React, { Component } from "react";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import Ball from "./Ball";
import "../App.css";
export default class Ballswitch90 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const balls = this.state.balls.map((a, i) =>
a ? (
<Ball p={{ num: i + 1, clicked: false }} />
) : (
<Ball p={{ num: i + 1, clicked: true }} />
)
);
return <div className="ballholder">{balls}</div>;
}
}
Ball component:
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from "react-router-dom"
import '../App.css'
export default class Ball extends Component {
constructor(props) {
super(props)
this.state = {
num:props.p.num,
clicked:props.p.clicked
}
}
render() {
return (
<div>
{this.state.clicked
?
<div className="aball">{this.state.num}</div>
:
<div className="aballred">{this.state.num}</div>
}
</div>
)
}
}
I've tried adding a padding and margin but that only changed the size at which the flats show up.

Answer 1

Probably the css rules with height and width make some problems.
You can see this snippet that works well:
https://codesandbox.io/embed/n6jrm1k2l
aball {
border-radius: 50%;
background-color: white;
border: 1px solid darkred;
padding: 1em;
/* Center the text contents */
display: inline-flex;
align-items: center;
justify-content: center;
color: black;
}
.aball:after {
content: "";
display: block;
/* Ensure the element is a square */
height: 0;
width: 100%;
padding-bottom: 100%;
}
.aball__value {
/* Set the height to 0 and overflow to visible to not interfere with the square styles */
overflow: visible;
height: 0;
/* Vertically center text since we set its height to 0 */
margin-top: -1em;
}