background-color of
outside of border

Question

In my card in example, I have a <p> in green at the bottom which go beyond my border.

I tried to apply an overflow: hidden; to my card-wrapper class but it remove the top of my circle.

How can I get the <p> inside my border?

Thanks for your help!

.card-wrapper {
  border: 1px solid #cce6e6;
  border-radius: 10px;
  margin: 60px 10px 10px 10px;
  position: relative;
}

.circle {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  background-color: #cce6e6;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  text-transform: uppercase;
  margin: 80px 0 24px 0;
}

.description {
  text-align: center;
  line-height: 32px;
  margin-bottom: 36px;
}

.keyword {
  text-align: center;
  color: #2a5555;
  background-color: #cce6e6;
  margin: 0;
  padding: 20px 0;
}

<div class="card-wrapper">
  <div class="circle"></div>
  <h5 class="title">Lorem ipsum</h5>
  <p class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut felis magna.
  </p>
  <p class="keyword">Lorem ipsum</p>
</div>

apply the same border-radius to the p only in the bottom – Temani Afif Aug 12 '19 at 20:56 — Temani Afif, Aug 12 '19 at 20:56
@TemaniAfif Thanks, It works! – Johan Rin Aug 12 '19 at 21:01 — Johan Rin, Aug 12 '19 at 21:01

background-color of outside of border

0 Answers0

background-color of
outside of border