msmith1114 msmith1114 - 17 days ago 6
CSS Question

CSS Round Div with Buttons inside?

I'm working on a "Simon Clone", and I have a Div (that is a square right now) and I'm trying to make it circular. Right now I'm wrapping the 4 colored buttons inside (with the correct lengths) so they sit inside it correctly.



.simon-container {
border: 2px solid purple;
}

.panel {
opacity: .35;
width: 300px;
height: 300px;
float: left;
font-size: 22px;
color: black;
}

.simon {
margin: 0 auto;
border: 1px solid black;
border-radius 10px;
display: flex;
flex-wrap: wrap;
width: 600px;
height: 600px;
}

#green {
background-color: green;
}

#red {
background-color: red;
}

#yellow {
background-color: yellow;
}

#blue {
background-color: blue;
}

<div class="simon-container">
<div class="simon">
<button id="green" class="panel 1" type="button" disabled>1</button>
<button id="red" class="panel 2" type="button" disabled>2</button>
<button id="blue" class="panel 3" type="button" disabled>3</button>
<button id="yellow" class="panel 4" type="button" disabled>4</button>
</div>
</div>





Basically I want the DIV that the buttons are in to be a circle. I thought
border-radius: 50%;
would work but it does not, and I'm assuming this is because of the buttons.

Is there a way I can make the div a circle but anything that flows outside of the div basically but "cut off" so it doesn't overflow out of the border? Is this possible? I'm assuming setting
overflow: hidden
would do this correct?

Although I'm still not sure why the div will not become a circle.

Answer

Set the border-radius to 50% and add overflow: hidden:

.simon-container {
  border: 2px solid purple;
}

.panel {
  opacity: .35;
  width: 300px;
  height: 300px;
  float: left;
  font-size: 22px;
  color: black;
}

.simon {
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  overflow: hidden;
}

#green {
  background-color: green;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

#blue {
  background-color: blue;
}
<div class="simon-container">
  <div class="simon">
    <button id="green" class="panel 1" type="button" disabled>1</button>
    <button id="red" class="panel 2" type="button" disabled>2</button>
    <button id="blue" class="panel 3" type="button" disabled>3</button>
    <button id="yellow" class="panel 4" type="button" disabled>4</button>
  </div>
</div>