formatting for "phone" not working - html

Question

I am currently developing my first chrome extension that uses html/css/javascript. I have a problem, and so far none of the questions in stackoverflow seem to answer my problem.
I have a layout that looks like a phone, just like an IPhone. Basically, my button inside the homepage-bottom ID div is not working properly. I want the homepage-bottom-inside ID div(it's color is black) round.
It currently looks like this.
Please explain my error, and fix the code.
#homepage-bottom-content {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 15px;
height: 50px;
padding-top: 10px;
width: 50px;
background-color: black;
border-radius: 100px;
}
#homepage-bottom-content-inside {
height: 25px;
width: 25px;
background-color: black;
border: #E6E6E6 2px solid;
border-radius: 7.5px;
margin-right: auto;
margin-left: auto;
}
<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>
EXTRA
This is how the overall "phone" looks.
#homepage {
margin: auto;
height: 620px;
width: 330px;
background-color: lightblue;
border-radius: 40px;
border: black 7px solid;
}
#homepage-content {
margin: auto;
height: 470px;
cursor: cell;
width: 270px;
background-color: white;
border-radius: 7.5px;
border: 3px black solid;
}
#homepage-bottom-content {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 15px;
height: 50px;
padding-top: 10px;
width: 50px;
background-color: black;
border-radius: 100px;
}
#homepage-bottom-content-inside {
height: 25px;
width: 25px;
background-color: black;
border: #E6E6E6 2px solid;
border-radius: 7.5px;
margin-right: auto;
margin-left: auto;
}
<div id="homepage">
<div id="homepage-top">
<div id="homepage-top-content">
<div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
<div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
</div>
</div>
<div id="homepage-content">
</div>
<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>
</div>

Answer 1

The padding-top is part of total height, so height:40px + padding-top:10px does it for homepage-bottom-content.
Be aware that the border thickness is also part of the total height.
#homepage-bottom-content {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 15px;
height: 40px;
padding-top: 10px;
width: 50px;
background-color: black;
border-radius: 100px;
}
#homepage-bottom-content-inside {
height: 25px;
width: 25px;
background-color: black;
border: #E6E6E6 2px solid;
border-radius: 7.5px;
margin-right: auto;
margin-left: auto;
}
<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>
Extra
Your phone fixed:
#homepage {
margin: auto;
height: 620px;
width: 330px;
background-color: lightblue;
border-radius: 40px;
border: black 7px solid;
}
#homepage-content {
margin: auto;
height: 470px;
cursor: cell;
width: 270px;
background-color: white;
border-radius: 7.5px;
border: 3px black solid;
}
#homepage-bottom-content {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 15px;
height: 40px;
padding-top: 10px;
width: 50px;
background-color: black;
border-radius: 100px;
}
#homepage-bottom-content-inside {
height: 25px;
width: 25px;
background-color: black;
border: #E6E6E6 2px solid;
border-radius: 7.5px;
margin-right: auto;
margin-left: auto;
}
<div id="homepage">
<div id="homepage-top">
<div id="homepage-top-content">
<div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
<div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
</div>
</div>
<div id="homepage-content">
</div>
<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>
</div>