FourFront's Blog

Creating Shadow Borders with Curved CSS Box Shadows

Updated: May 04, 2015

This is a series of examples demonstrating a pure CSS technique for creating border shadows and dividers by utilizing curved CSS box shadows, the :before and :after pseudo-elements, and border radius. It also includes a method for creating a box shadow on just the top, bottom, or a single side of an html element.

A Single Border with an Inner Curved CSS Box Shadow

For our first example we’ll create a simple border with a curved shadow, often used for dividing sections of a page. For clarity’s sake I’ve placed a different background color on our containing div, but if we kept the background the same color as any background behind it, the result would be just the dividing border.

CSS:

.divider-inside-top {
  position:relative;
  overflow:hidden; 
  border-top:1px solid #ddd; 
}
.divider-inside-top:before {
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:96%;  
  top: -10px; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}

Result:

Box Shadow Top Only

The containing div is styled with position: relative and overflow: hidden. I’ve also include a top border, which can be excluded, but for IE8 and below the border will still provide a divider even though our shadow doesn’t show up. For a shadow on the top only, we can use either the :before or :after pseudo-element to create the shadow. The general idea with this technique is to adjust the size, position, and shadow styles of the pseudo-element to create the desired effect. In this case we want the pseudo-element to be positioned just outside of the the containing box with its curved shadow visible inside. When using this code in practice, make sure to include all the appropriate CSS3 vendor prefixes.

Additional Code Examples

Box Shadow Bottom Only

CSS:

.divider-inside-bottom {
  position:relative;
  overflow:hidden; 
  border-bottom:1px solid #ddd; 
}
.divider-inside-bottom:before {
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:96%;  
  bottom: -10px; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}

Result:

Box Shadow Bottom Only

 

Box Shadow Top and Bottom

In order to style two separate shadows, we use both the :before and :after pseudo-classes.

CSS:

.divider-inside-top-bottom {
  position:relative;
  overflow:hidden; 
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd; 
}
.divider-inside-top-bottom:before {
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:96%;  
  top: -10px; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}
.divider-inside-top-bottom:after {
  content: "";
  position:absolute;
  z-index: 1;
  width:96%; 
  bottom: -10px;
  height: 10px;
  left: 2%;
  border-radius: 100px / 5px;
  box-shadow:0 0 18px rgba(0,0,0,0.6);
}

Result:

Box Shadow Top and Bottom

 

Box Shadow Top Only Outer

For a shadow that appears outside the containing element, we do not include overflow: hidden, position the pseudo-element just inside of the container, and use z-index to put the shadow element behind the container.

CSS:

.divider-outside-top {
  position:relative;
}
.divider-outside-top:before {
  content: ""; 
  position:absolute; 
  z-index: -1; 
  width:96%;  
  top: 0; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}

Result:

Box Shadow Top Only Outer

 

Box Shadow Outer Bottom Only Outer

CSS:

.divider-outside-bottom {
  position:relative;
}
.divider-outside-bottom:before {
  content: ""; 
  position:absolute; 
  z-index: -1; 
  width:96%;  
  bottom: 0; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}

Results:

Box Shadow Bottom Only Outer

 

Box Shadow Top and Bottom Outer

CSS:

.divider-outside-top-bottom {
  position:relative;
}
.divider-outside-top-bottom:before {
  content: ""; 
  position:absolute; 
  z-index: -1; 
  width:96%;  
  top: 0; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}
.divider-outside-top-bottom:before {
  content: "";
  position:absolute;
  z-index: -1;
  width:96%; 
  bottom: 0;
  height: 10px;
  left: 2%;
  border-radius: 100px / 5px;
  box-shadow:0 0 18px rgba(0,0,0,0.6);
}

Results:

Box Shadow Top and Bottom Outer

 

Box Shadow Left Only

By changing the size and position of the pseudo-element, we can create shadow borders for the sides of a container as well.

CSS:

.divider-inside-left {
  position:relative;
  overflow:hidden; 
  border-left:1px solid #ddd; 
}
.divider-inside-left:before {
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:10px;  
  top: 5%; 
  height: 90%; 
  left: -10px; 
  border-radius: 5px / 100px; 
  box-shadow:0 0 13px rgba(0,0,0,0.6); 
}

Results:

Box Shadow Left Only

 

Box Shadow Right Only

CSS:

.divider-inside-right {
  position:relative;
  overflow:hidden; 
  border-right:1px solid #ddd; 
}
.divider-inside-right:before {
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:10px;  
  top: 5%; 
  height: 90%; 
  right: -10px; 
  border-radius: 5px / 100px; 
  box-shadow:0 0 13px rgba(0,0,0,0.6); 
}

Results:

Box Shadow Right Only

 

Box Shadow Sides Only

CSS:

.divider-inside-sides {
  position:relative;
  overflow:hidden; 
  border-left:1px solid #ddd; 
  border-right:1px solid #ddd;
}
.divider-inside-sides:before {
  content: "";
  position:absolute;
  z-index: 1;
  width:10px; 
  top: 5%;
  height: 90%;
  left: -10px;
  border-radius: 5px / 100px;
  box-shadow:0 0 13px rgba(0,0,0,0.6);
}
.divider-inside-sides:after {
  content: "";
  position:absolute;
  z-index: 1;
  width:10px; 
  top: 5%;
  height: 90%;
  right: -10px;
  border-radius: 5px / 100px;
  box-shadow:0 0 13px rgba(0,0,0,0.6);
}

Results:

Box Shadow Sides

This is just the beginning of what you can create with this technique. The above styles can be combined in different ways or the box-shadow shapes and sizes can be altered to create a wide vartiety of effects.

About The Author
Was this article helpful?

Leave a Reply

Your email address will not be published.