How to have the border be inside of its div [Answered]RSS

• • Reply
  gunderj

  Member

  236 Points

  459 Posts

  How to have the border be inside of its div

  Dec 19, 2016 10:24 PM|gunderj|LINK

  Is there a way to have a border that does increase the size of its div?

  If the div height is 16px and border as border: solid 2px black;, I want the div height to remain at 16px and not increase to 18px (which occurs due to the border).

  My requirement will not allow changing the div height to 14px.

  Thanks for any thought son this.

• • Reply
  bruce (sqlwo...

  All-Star

  50854 Points

  12088 Posts

  Re: How to have the border be inside of its div

  Dec 20, 2016 01:37 AM|bruce (sqlwork.com)|LINK

  If it's a modern browser, set box sizing:
  
  box-sizing: border-box;
  
  
  bruce (sqlwork.com)
• • Reply
  Cathy Zou

  Star

  8650 Points

  2882 Posts

  Re: How to have the border be inside of its div

  Dec 20, 2016 09:41 AM|Cathy Zou|LINK

  Hi, gunderj.

  For your problem, as brue said, you could set  box-sizing for Div.

   <style type="text/css">
          #MyDiv {
              box-sizing: border-box;
              width: 100px;
              height: 100px;
              border: 10px solid blue;
              background: red;
          }
      </style>
  
  <div id="MyDiv">   
      </div>

  Output In Chrome:

  
  
  Best Regards

  Cathy

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.