#small {

  border: 1px solid black;

  width: 200px;

  height: 50px;

  /*how to get a good shadow (AT THE border-right OF THE SMALL DIV) that is equal to the shadow of the large div but that does cut of as it reaches the border-bottom of the small div / the border-top of the large div.

 NOTE: I CANNOT use Z-index, I have something way more complicated. Also, Spread CANNOT be used here because that doesnt cut off when it reaches the border-bottom/border-top, it will look really weird when I use spread.

 */

}

#large {

  width: 300px;

  border: 1px solid black;

  height: 100px;

  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);

-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);

box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);

}

​

#small{

   -webkit-box-shadow: 9px 0px 3px -1px rgba(50, 50, 50, 0.75);

}

​