cssborder-boxbox-sizing

box-sizing - 'outline' is calculated in 'border-box' OR 'content-box'?


When calculating width and height of the box, outline width like

outline: 5px dashed red;

if box-sizing:border-box, is outline will be considered in the width/height of the box ?


Solution

  • I found a note about it on W3Schools HERE

    It says: "Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline."

    When you set an outline it should NOT be affected by box-sizing setting and outline will be outside of the box.