add border to inline-block equally - html

Question

https://jsbin.com/dazugonoli/1/edit?html,css,output
How would you guys add border to inline-block div? Imagine I'm doing a calendar, the border seem repeated and not equal on each side of the box.
#parent{
width: 400px;
}
#parent > div{
display: inline-block;
width:50px;
height:50px;
line-height:50px;
background:cyan;
border:1px solid;
text-align:center;
}
<div id="parent">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Answer 1

The simplest solution is to use outline instead of border
#parent > div{
display: inline-block;
width:50px;
height:50px;
line-height:50px;
background:cyan;
outline: 1px solid;
text-align:center;
}
<div id="parent"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Answer 2

Add a negative margin to the elements
#parent {
width: 400px;
}
#parent>div {
margin: -1px 0 0 -1px;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
background: cyan;
border: 1px solid;
text-align: center;
}
<div id="parent">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Answer 3

You could add a negative margin to the top and left (or right and bottom) sides:
margin: -1px 0 0 -1px;

Answer 4

Works if the last line contains the same or less elements than the previous lines. And also when you know the number of elements in one line - you do not use the wrapping.
#parent > div{
display: flex;
}
#parent > div > div{
display: flex;
width:50px;
height:50px;
line-height:50px;
background:cyan;
justify-content:center;
align-items: center;
border-bottom:1px solid;
border-right:1px solid;
}
#parent > div:first-child > div {
border-top: 1px solid;
}
#parent > div > div:first-child {
border-left: 1px solid;
}
<div id="parent">
<div>
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>
<div><div>8</div><div>9</div><div>10</div></div>
</div>