Add Border to Div Increase Div Width

When 1 px border is added to div, Div size increases, Don't want to do that

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

Eg:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

How to set a div width with border in fix width div

Just add display: block; to that div. Check updated Snippet below

.box {  width: 300px;  border: 1px solid;  padding: 10px 0;}
.one {  width: 100%;  background: tomato;  height: 40px;}
.two {  display: block;  border: 2px solid;  height: 40px;}

<div class="box">  <div class="one"></div>  <div class="two"></div></div>

Place border in a 100% height and width div - right and bottom border outside

By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

There's a CSS property called box-sizing which allows you to adjust this property. Adding box-sizing: border-box to .div-with-border should fix this for you!

Take a look at the link above. They have a live example that demonstrates box-sizing.

CSS div is larger than border of the div its within

Because..

By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen.

Just add *{box-sizing: border-box;} You can find more info here

*{box-sizing: border-box;}
body {
    margin: 0;
    font-family: Helvetica, sans-serif;
}
.form.new_user {
            display: inline-block;
            width: 100%;
            min-width: 230pt;
            max-width: 270pt;
            border-color: #3e3e3e;
            border-width: 1px;
            border-style: solid;
            padding: 5pt;
        }
.content {
    padding: 7pt;
    margin: 7pt;
}

        @media screen and (max-width: 600pt){
            .form.new_user {
                min-width: 100px;
                max-width: inherit;
            }
        }

<body>
<div class="content">
<div class="form new_user">
</div>
</div>
</body>

Border around p takes up whole div width

Illegal HTML does what illegal HTML does.

Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?

Don't wrap your P in H2 or make H2 display:inline-block

.border {
  border-style: solid;
  border-color: black;
}

h2 {
  font-weight: normal;
  display: inline-block;
}

<h2>
  Plate number:
  <br>
  <p class="border">5649JSN</p>
</h2>

How to give border to any element using css without adding border-width to the whole width of element?

outline:1px solid white;

This won't add the extra width and height.

How to set a border for an HTML div tag

Try being explicit about all the border properties. For example:

border:1px solid black;

See Border shorthand property. Although the other bits are optional some browsers don't set the width or colour to a default you'd expect. In your case I'd bet that it's the width that's zero unless specified.

How to add borders to div without messing up the layout?

The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.

So change your container to:

 #container {
    width: 970px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}

See: http://jsfiddle.net/QnRe4/13/