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?

    **Example:**
    http://tinker.io/6f2b5

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

    Thanks

    # 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.

    http://codepen.io/nordstromdesign/pen/awegv

    # February 16, 2013 at 9:57 am

    @nordstromdesign

    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:

    http://tinker.io/6f2b5/1

    # February 16, 2013 at 10:01 am

    I made some adjustments:

    http://codepen.io/nordstromdesign/pen/awegv

    # February 16, 2013 at 10:16 am

    @nordstromdesign

    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) http://tinker.io/6f2b5/2

    Example **with** (display: table) http://tinker.io/6f2b5/4

    # 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

    @wolfcry911

    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

    @crocodillon

    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

    @wolfcry911

    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

    http://tinker.io/6f2b5/6

    # February 18, 2013 at 7:04 am

    @wolfcry911

    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

    @paulie_d

    thanks!

    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.

*May or may not contain any actual "CSS" or "Tricks".