I am having trouble creating an input square with 3 rows and 3 columns. The borders between each two input boxes are overlapping, resulting in a double thickness border. To see this issue in action, you can run the provided html. How can I fix this so that the borders have only one line?
.container{
float:left;
margin-top: 20px;
width: 90px;
}
.box {
color: darkgreen;
font-size: 16px;
font-weight: bold;
text-align: center;
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid gray;
color:gray;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>;
<title>Title</title>;
</head>;
<body>><div class="container">><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text">>;
</div>";
</body>";
</html>";<