card stack effect with css border radius is not working

Question

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

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>

`box-shadow` is taking the `border-radius` check the fiddle i think the issue is because of the size the size of `box-shadow` is decreased with reduces the `border-radius` but you if have only 3 layers then you can use this example https://jsfiddle.net/victor_007/2zhjLdux/2/ — Vitorino fernandes, May 11 '16 at 11:26
Perhaps this [SO question](https://stackoverflow.com/questions/29234703/inset-box-shadow-not-following-the-curve) gives some answers. It's about inset borders but the reason why the radius changes is the same I guess... — michaPau, May 11 '16 at 11:30

score 3 · Accepted Answer · answered May 11 '16 at 11:39

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>

score 1 · Answer 2 · answered May 11 '16 at 11:23

1

Try This:

    .card.noradius {
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
}

answered May 11 '16 at 11:23

Asim Iqbal

148
1
7

score 0 · Answer 3 · answered May 11 '16 at 11:35

i think you need like this

body {
  background :  #0c1013;
  font-family : arial;
}
.card {
  margin: 0 auto 2em;
  padding: 2em;
  width: 80%;
  border-radius:10px;
  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 #6C7071, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #3B3F40, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1) !important;
}


.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>

card stack effect with css border radius is not working

3 Answers3