Quick Note about Box-Sizing/Box-Shadow

  |   Source


box-sizing is used to tell the browser what the sizing properties (width and height) should include.

It has following properties:

  • content-box: Default. border, padding and margin is not included in counting width/height (include min-/max-) properties.

  • border-box: the width/height properties includes content, padding and border, but not include margin

  • initial/inherit: set to default value/inherit from its parent


The website cssmatic contains a very good box-shadow generator to generate/understand box-shadow better.

box-shadow has six parameters with optional ones. Its syntax is:

/*Option 1*/
box-shadow: none;

/*Option 2*/
box-shadow: (inset) h-shadow v-shadow blur spread color

/*Option 3*/
box-shadow: initial/inherit

Here is a list of properties in Option 2:

  • inset: Optional. Shadow is towards inside of box. If ommited, shadows is expand towards out.

  • h-shadow: Required. The position of horizonal shadow. Negative values means the whold shadow box is moving towards left. Positive values means the box moving towards right.

  • v-shadow: Required. the position of vertical shadow. Negative values means the whole shadow box is moving towards top. Positive values means the box moving towards down.

  • blur: Optional. represents how much 'transition' effect this shadow have (i.e. the transition process from box color to container color). 0 means shadow box is all real color/no transition.

  • spread: Optional. from center of shadow, how large the shadow can be (can be understand as shadow area). 0 meas same size as box item. Negative value means smaller than box item area.

  • color: Optional. Any color code. rgba is a good option to includes opacity for shadow. Such as rgba(0,0,0,0.75);.

Comments powered by Disqus