Forums

Rugg

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

nordstromdesign

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

Rugg

@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

nordstromdesign

I made some adjustments:

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

Rugg

@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

wolfcry911

how about adding something like this:

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

Rugg

@wolfcry911

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

CrocoDillon

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

Rugg

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