How to create a CSS3 box-shadow on all sides but one?

Spread the love

Sometimes, we want to create a CSS3 box-shadow on all sides but one.

In this article, we’ll look at how to create a CSS3 box-shadow on all sides but one.

How to create a CSS3 box-shadow on all sides but one?

To create a CSS3 box-shadow on all sides but one, we set overflow to hidden.

For instance, we write

<div><div>tab</div></div>

to add nested divs.

Then we write

div div {
  box-shadow: 0 0 5px #000;
  height: 20px;
}
div {
  overflow: hidden;
  height: 25px;
  padding: 5px 5px 0 5px;
}

to add box shadow to the nested div.

And we cut off the box shadow on the bottom with overflow: hidden;.

Conclusion

To create a CSS3 box-shadow on all sides but one, we set overflow to hidden.

Leave a Reply

Your email address will not be published. Required fields are marked *