Box Shadow (Inner and Outer)

and Box Sizing

Box Shadow Outer

The box shadow property allows you to put a shadow onto an element. This outer box shadow will allow you to put the shadow on the outside of an element (drop shadow).

Box Shadow Inner

The box shadow property allows you to put a shadow onto an element. This inset box shadow will allow you to put the shadow on the inside of an element (inner shadow).

Box Sizing

box-sizing: content-box;

box-sizing: border-box;

box-sizing: inherit;

The box-sizing property allows you to define whether to include padding and borders within the specified width.For example, if you would like a box to be exactly 200px wide, you can specify box-sizing as "border-box",set the width as 200px, and any padding or border will stay within the 200px. Content-box is the standard rendering (padding and border is in addition to the width).