How to make parts of div border invisible - css

Question

Good day to everyone. Just don't know how to remove central part of div#additionalBorder. I thought I could do it with inner div#partition but got stuck. Is it possible to do it in such way?
Or may be I should use pseudo elements ::before.
Here 's screen of what I mean:
#outerCircle {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 560px;
border: 2px dotted grey;
position: relative;
}
.bigButton {
height: 250px;
width: 250px;
border: solid #464646;
}
#greenButton {
background-color: #23a846;
border-radius: 100% 0 0 0;
border-width: 20px 10px 10px 20px;
}
#redButton {
background-color: #a50005;
border-radius: 0 100% 0 0;
border-width: 20px 20px 10px 10px;
}
#yellowButton {
background-color: #a7a408;
border-radius: 0 0 0 100%;
border-width: 10px 10px 20px 20px;
}
#blueButton {
background-color: #162da7;
border-radius: 0 0 100% 0;
border-width: 10px 20px 20px 10px;
}
div#innerCircle {
border: 15px solid #464646;
border-radius: 50%;
position: absolute;
top: 25%;
right: 25%;
background-color: aliceblue;
}
div.additionalBorder {
margin: 4px;
border: 2px solid black;
border-radius: 50%;
height: 238px;
width: 238px;
overflow: hidden;
}
p#tradeMark {
margin: auto;
height: 102px;
text-align: center;
font-size: 68px;
font-family: myDirector;
color: aliceblue;
background-color: black;
border-color: antiquewhite;
line-height: 140px;
}
span#reg {
font-size: 9px;
}
.partition {
height: 7px;
}
.buttons {
height: 130px;
border-top: 2px solid black;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id="outerCircle">
<div class="bigButton" id="greenButton"></div>
<div class="bigButton" id="redButton"></div>
<div class="bigButton" id="yellowButton"></div>
<div class="bigButton" id="blueButton"></div>
<div class="bigButton" id="innerCircle">
<div class="additionalBorder">
<p id="tradeMark">simon<span id="reg">®</span>
</p>
<div class="partition"></div>
<div class="buttons"></div>
</div>
</div>

Answer 1

i just change this classes. i removed border from "div.additionalBorder" and add border, border-radius to ".buttons".
div.additionalBorder {
border-radius: 50%;
margin: 4px;
height: 242px;
width: 242px;
overflow: hidden;
}
.buttons {
border: 2px solid black;
border-radius: 0 0 130px 130px;
height: 130px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#outerCircle {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 560px;
border: 2px dotted grey;
position: relative;
}
.bigButton {
height: 250px;
width: 250px;
border: solid #464646;
}
#greenButton {
background-color: #23a846;
border-radius: 100% 0 0 0;
border-width: 20px 10px 10px 20px;
}
#redButton {
background-color: #a50005;
border-radius: 0 100% 0 0;
border-width: 20px 20px 10px 10px;
}
#yellowButton {
background-color: #a7a408;
border-radius: 0 0 0 100%;
border-width: 10px 10px 20px 20px;
}
#blueButton {
background-color: #162da7;
border-radius: 0 0 100% 0;
border-width: 10px 20px 20px 10px;
}
div#innerCircle {
border: 15px solid #464646;
border-radius: 50%;
position: absolute;
top: 25%;
right: 25%;
background-color: aliceblue;
}
div.additionalBorder {
border-radius: 50%;
margin: 4px;
height: 242px;
width: 242px;
overflow: hidden;
}
p#tradeMark {
margin: auto;
height: 102px;
text-align: center;
font-size: 68px;
font-family: myDirector;
color: aliceblue;
background-color: black;
border-color: antiquewhite;
line-height: 140px;
}
span#reg {
font-size: 9px;
}
.partition {
height: 7px;
}
.buttons {
border: 2px solid black;
border-radius: 0 0 130px 130px;
height: 130px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id="outerCircle">
<div class="bigButton" id="greenButton"></div>
<div class="bigButton" id="redButton"></div>
<div class="bigButton" id="yellowButton"></div>
<div class="bigButton" id="blueButton"></div>
<div class="bigButton" id="innerCircle">
<div class="additionalBorder">
<p id="tradeMark">simon<span id="reg">®</span>
</p>
<div class="partition"></div>
<div class="buttons"></div>
</div>
</div>