Border Radius effect on <p>Text</p>

I’m using RGB opacity as to allow me to change the background transparency without fading the text… they are both listed in the topCircle class of the CSS… so why is the text in the div still showing up outside of the border radius?


<div class="bigWhite">
  <div class="wrapper">
    <div class="back">
      <div class="pad shape1">
        <audio preload="auto" class="sound1" data-pad="1">
          <source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
          <source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
        </audio>
      </div>

      <div class="pad shape2">
        <audio preload="auto" class="sound2" data-pad="2">
          <source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
          <source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
        </audio>
      </div>

      <div class="pad shape3">
        <audio preload="auto" class="sound3" data-pad="3">
          <source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
          <source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
        </audio>
      </div>

      <div class="pad shape4">
        <audio preload="auto" class="sound4" data-pad="4">
          <source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
          <source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
        </audio>
      </div>
      <div class="topCircle">
      <p>60% opacity</p>
      </div>
      <div class="circle"></div>
    </div>
  </div>
</div>
.topCircle {
  position: absolute;
  top: 148px;
  left: 148px;
  width: 333px;
  height: 333px;
  background: rgba(76, 175, 80, 0.6);
  border-radius: 175px;
  z-index: 19;
}
.topCircle:hover {
  background: rgba(76, 175, 80, 1);
}
.circle {
  position: absolute;
  top: 140px;
  left: 140px;
  width: 350px;
  height: 350px;
  background: #000;
  border-radius: 175px;
  z-index: 10;
}
.wrapper{
  position: relative;
  width:640px;
  margin:0 auto;
  background-color: green;
}
.bigWhite{
  width:full;
  height: 900px;
  background-color: grey;
}
.back{
  position: absolute;
  padding:3px;
  top:100px;
  width:614px;
  height: 614px;
  z-index:0;
  background-color: #000;
  border-radius: 310px;
}
.pad {
  width: 300px;
  height: 300px;
  float: left;
  z-index: 1;
  margin: 3px;
  filter: alpha(opacity=60);
  opacity: .6;
}
.pad:hover {
  opacity: 1;
  filter: alpha(opacity=100);

}

.shape1 {
  border-top-left-radius: 300px;
  background-color: green;
}

.shape2 {
  float: left;
  border-top-right-radius: 300px;
  background-color: red;
  clear: right;
}

.shape3 {
  float: left;
  border-bottom-left-radius: 300px;
  background-color: yellow;
  clear: left;
}

.shape4 {
  float: left;
  border-bottom-right-radius: 300px;
  background-color: RoyalBlue;
}

https://codepen.io/TurtleWolf/pen/qjOQLZ

Why wouldn’t it, unless you applied overflow: hidden ?

ok… so how do I get the text to center back in the middle where it can be read? I think I’ve been staring at java script so long, I’m blanking on my css…

Horizontal is easy with text-align: center. Vertical can be a little more tricky. Since it’s a rigid layout, you could “magic number” it with some margin/padding-top on the <p> which is not something I would normally suggest. Other ways could be to use flex to centre it, or possibly table-cell with vertical align.

ok, found it…
text-align: center;

Thanks

That works:-

.topCircle {
  position: absolute;
  top: 148px;
  left: 148px;
  width: 333px;
  height: 333px;
  background: rgba(76, 175, 80, 0.6);
  border-radius: 175px;
  z-index: 19;
  display: table;
}
.topCircle p {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.