Saqueib Saqueib - 6 months ago 73
HTML Question

card stack effect with css border radius is not working

I want to create card stack using css

box-shadow
, it's working great without
border-radius
, but when I add radius it's losing roundness as it progresses. Please see the below code.

I want this result

enter image description here



body {
background : #0c1013;
font-family : arial;
}

.card {
margin: 0 auto 2em;
padding: 2em;
width: 80%;
border-radius:4px;
background-color: #f2f2f2;
word-wrap: break-word;
box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #f2f2f2, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #e5e5e5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);
}

.card.noradius {
border-radius:0;
}

<div class="card">
<p>Here's a stack of cards <code>with border radius</code>. </p>
</div>

<div class="card noradius">
<p>Here's a stack of cards <code>without border radius</code>. </p>
</div>




Answer

If you don't need to use box shadow for the card effect, you can use the after and before pseudo elements to gain more control of the lower cards border radii:

body {
  background: #0c1013;
  font-family: arial;
}
.card {
  position: relative;
  margin: 0 auto 2em;
  width: 80%;
}
.card .inner {
  padding: 2em;
  border-radius: 4px;
  background-color: #f2f2f2;
  word-wrap: break-word;
  position: relative;
  z-index: 3;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
}
.card:before,
.card:after {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
  content: '';
  display: block;
  position: absolute;
  height: 9px;
  border-radius: 4px;
}
.card:before {
  bottom: -4px;
  left: 4px;
  right: 4px;
  background-color: #6B6F70;
  z-index: 2;
}
.card:after {
  bottom: -8px;
  left: 8px;
  right: 8px;
  background-color: #3B3F40;
  z-index: 1;
}
.card.noradius .inner,
.card.noradius:before,
.card.noradius:after {
  border-radius: 0;
}
<div class="card">
  <div class="inner">
    <p>Here's a stack of cards <code>with border radius</code>.</p>
  </div>
</div>

<div class="card noradius">
  <div class="inner">
    <p>Here's a stack of cards <code>without border radius</code>.</p>
  </div>
</div>