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.
