How to make parts of div border invisible

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">&reg;</span>
      </p>
      <div class="partition"></div>
      <div class="buttons"></div>
    </div>
  </div>

What exactly do you mean by central part? Can you provide an image of the expected output? — Harry, Oct 25 '16 at 08:23
Honestly, this is overcomplicated fror HTML & CSS. You'd be better off with an SVG. - http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side — Paulie_D, Oct 25 '16 at 08:24
Ok, got you. Since the areas are of same solid color, you could place a bar of the required thickness in the middle but as @Paulie_D has mentioned above, you could do the whole thing more easily with SVG. — Harry, Oct 25 '16 at 08:27

Eren Akkus · Accepted Answer · 2016-10-25T08:48:19.580

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">&reg;</span>
      </p>
      <div class="partition"></div>
      <div class="buttons"></div>
    </div>
  </div>

If it's not hard, write a few words, how did you do that) 'cause for others it would be more clearly to look for — Taras Yaremkiv, Oct 25 '16 at 08:36
Sorry Taras, I was working on the one hand. i'm editing my answer. — Eren Akkus, Oct 25 '16 at 08:44

How to make parts of div border invisible

1 Answers1