CODEWITHSUNDEEP
htmlcss
msmith1114
msmith1114

Reputation: 3229

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.

Upvotes: 1

Views: 1478

Answers (3)

James
James

Reputation: 63

If you got to https://www.w3schools.com/w3css/w3css_buttons.asp you will find out how to make circular buttons

Upvotes: 1

j08691
j08691

Reputation: 207881

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>

Upvotes: 3

Aiwass 418
Aiwass 418

Reputation: 192

Have you try this?

.simon-container {
      border: 2px solid purple;
      border-radius:50%;
      overflow:hidden;
}

Upvotes: 0

Related Questions