Back to All

Creating Shadow Borders with Curved CSS Box Shadows

Updated:

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. 

Was this article helpful?

17 Comments:

larry nalzaro

super cool ... thanks.

D

Can you show the HTML setup because I tried putting this effect on a div with nested divs inside of it and the top & bottom effect does not work. It just makes a white strip on the bottom with the shadows.

thanks

Chris Arasin

There isn’t any html setup, it’s just a single <div>. Do the nested div’s have a background set? They may be covering the shadows.  Can you show me a link to your code?

D

Hi Chris

I’m trying to add this to an OpenCart theme I’m working on. Specifically I’m using it on the featured items box on the homepage. If you’ve ever used OpenCart the featured.tpl php file is what’s in question and the .box class.

At first I thought something might be nested with weird z-index because I ran into that before when using pseudo classes (such as a container having a z-index specified and one of the child divs using pseudo class for shadows with z-index of -1 produces very odd results);

I’ll double-check the CSS to see if anything might be covering it. If not I’ll post the code here. Really hoping to get this to work. Been trying to figure it out for a while.

thanks

D

Worked it out. First a few divs did have background color and another was messing with overflow, but also the code you posted above had 2 different classes which I thought were the same at first glance. I changed it so bother classes were divider-inside-top-bottom and then it put them above and below.

works great now. thanks a lot for sharing this.

Chris Arasin

Glad to hear it! Let me know if you have any other issues.

Daklab

I tested this on my Galaxy Nexus (4.2 Android running Chrome) and the inner shadow examples don’t work, but the outer examples do. Just giving you a heads up in case this is a simple fix.

Chris Arasin

Thanks Daklab, I’ll take a look at that setup when I get a chance.

Minum

Hey there, was just wondering if there is a possibility in getting this to work on :hover?
I’ve tried playing around with getting it to work on a navbar hover, but can’t seem to get it working =(

Chris Arasin

Hey Minum, yep, just add in a :hover to the css pseudo-element creating the shadow, making sure it’s before the :before or :after. For example:
.divider-inside-top:hover:before { same code here… }

Curtis

Hey,

Really useful drop shadows, thankyou!

Thought I should let you know I have just noticed an error in the CSS on the Box Shadow Top and Bottom.

The third class should read:

.divider-inside-top-bottom:after

and not

.divider-inside-bottom:after

Cheers.

Curtis

Chris Arasin

Thanks Curtis!

anonymous

Your site’s examples don’t work

Taher Ahmed

Just wanted to say thank you, simple and clean

Espen

Thank you so much, exactly what I was looking for! Keep it up Curtis!

MaCue

Is there a way to get this shadow to work without using “position: absolute”?

MaCue

Never mind, I got it!  Thanks for the awesome tutorial.

Add a Comment

* Required Fields
background background
background background background
background background background background