All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @wolfcry911

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

    # February 16, 2013 at 4:20 pm

    This reply has been reported for inappropriate content.

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

    # February 16, 2013 at 7:44 pm

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

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

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed