How can I create a Connect4 board with the exact styles and properties shown in the image? I want to achieve the curved sides effect as displayed. Can this be done using only HTML elements, or is there an easy SVG solution available?
Here is my current code:
for (let i = 0; i < 64; i++) {
document.getElementById("cont").appendChild(document.createElement('div'))
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#cont {
display: grid;
grid-template-columns: repeat(8, 80px);
grid-template-rows: repeat(8, 80px);
background-color: #84A4FC;
width: fit-content;
height: 800px;
width: 800px;
grid-gap: 20px;
padding-top: 10px;
padding-left: 10px;
}
#cont div {
background-color: white;
width: 80px;
height: 80px;
box-shadow: inset 0px 3px 6px #00000040;
border-radius: 50%;
border: 2px solid #FFFFFF;
}<div id="cont"></div>