Get a free trial // Grow your CSS skills // Land your dream job

Inset border with box-shadow — extra top space?

  • # February 16, 2013 at 9:44 am

    Hello everyone,

    I am using box-shadow to mimic an inset border for a series of divs. The problem is the box-shadow doubles in pixels at the top/bottom of each div because they are stacked.

    Is there a way to perhaps cut the top/bottom border dimension in half…so when stacked it equals the left/right?


    _Note: if anyone has a better approach for accomplishing an inset border…I’m all ears._


    # February 16, 2013 at 9:51 am

    If you use:
    box-sizing: border box;
    then your padding and borders will not exceed the limits of your overall dimensions.

    # February 16, 2013 at 9:57 am


    Thanks for the reply…your approach doesn’t seem to solve the problem though. If you remove the margin-bottom in your example…we end up with the same result. In the case of my example, there should be no margin.

    Example Update:

    # February 16, 2013 at 10:01 am

    I made some adjustments:

    # February 16, 2013 at 10:16 am


    I’ve partially found a solution using your method, but it only works when I remove _display: table_. Unfortunately I need to keep _display: table_ because other elements (not shown) use _disply: table-cell_ and depend on the parent. The border is applied outside the element when _display: table_ is used.

    Example **without** (display: table)

    Example **with** (display: table)

    # February 16, 2013 at 11:49 am

    how about adding something like this:

    div~div {
    margin-top: -20px;

    # February 16, 2013 at 1:25 pm


    Still doesn’t correct anything. I think the problem now depends on the display: table

    # February 16, 2013 at 4:20 pm

    Your last two examples, with and without `display: table`, looks the same to me.

    # February 16, 2013 at 7:44 pm


    They do look similar…but there is a slight difference. The example without **display: table** has an inset border, while the example with **display: table** does not. The Inset border is the desired output.

    # February 16, 2013 at 9:48 pm

    > Still doesn’t correct anything. I think the problem now depends on the display: table

    works for me…

    # February 17, 2013 at 3:40 pm


    I’m not picking up what you’re throwing down. Would you mind posting an updated working sample please?

    # February 17, 2013 at 4:07 pm

    # February 18, 2013 at 7:04 am


    I see now. Please excuse my ignorance, but can you please explain what the following is called and generally used for? Thanks

    div~div { }
    # February 18, 2013 at 7:40 am



    EDIT: I’m looking for something similar to the posted article, but for html5 and jquery. Do you have any recommendations?

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed