Home » SEO » Creating Shadow Borders with Curved CSS Box Shadows

Creating Shadow Borders with Curved CSS Box Shadows

Table of Contents
    Add a header to begin generating the table of contents
    Scroll to Top

    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
    Share This Article
    Facebook
    Twitter
    Pinterest
    LinkedIn
    Discussion

    Leave a Reply

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

    Related Content

    About FourFront

    FourFront uses data to provide digital marketing and market research services. In our blog, our team of analysts, strategists, and engineers provides tips, insights, analysis, and commentary.

    Keep In Touch

    Learn about new articles by following us on social:
    Scroll to Top

    Sign Up for Updates

    Get regular updates about what’s happening at FourFront!

    Enter your full name and email to be in the know about all things SEO, data solutions, and much more.

    Submit a Request