How to Give Border to Any Element Using CSS Without Adding Border-Width to the Whole Width of Element

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.

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 */
}

Add border without changing height of block

You can offset this by adjusting the top & bottom margins on the hovered state:

JS fiddle

.row:hover {
    background: yellow;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: -1px 0;
}

Restrict border width to text width in a block element

If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).

The HTML does not change:

<div class="dossier_titre">
    <h2>Horizon 2020, nouvelles opportunités</h2>
</div>

and you can apply the following CSS:

.zone_33 {
    width: 238px;
    padding: 0px;
    margin: 0px;
}

.zone_33 .dossier_titre {
    margin: 0px 0px 20px 0px;
}

.zone_33 h2 {
    color: #616263;
    font-size: 150%;
    font-weight: lighter;
    padding: 0px 0px 12px 0px;
    background: none;
    border-bottom: 1px solid grey;
    display: table-cell;
    text-transform: uppercase;
}

.zone_33 .dossier_titre:after {
    content: "";
    display: table-cell;
    width: 100%;
}

For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).

Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.

How This Works

I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.

Limitations

table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.

If the title had many short words, you might get the line breaking in unexpected places. You would need to insert to keep specific words together as needed.

Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/

Is it possible to have top-border take up full width in an element with other borders?

You can use box-shadow property...

div {  box-sizing: border-box;  width: 100px;  height: 100px;  border-top: 20px solid black;  box-shadow: inset -20px 0px green, inset 20px 0px 0px green, inset 0 -20px 0px green;}

<div></div>

Add a CSS border on hover without moving the element

You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

How to prevent adjoining elements from moving when increasing border width?

Pretty easy to do actually. If you don't want to go the absolute position route, you can do it two ways: substitute a box-shadow the increased border if your don't mind the compatibility compromise or use box-sizing:border-box. The only problem with box-sizing:border-box is that it shifts your content inward (the style rule calculates the total width + padding + border-width in the width attribute. If you set a 5px border to a 100px box, the width is normally 110px to include both left and right borders. With the box-sizing attribute it calculates the border width into the width making it 90px wide instead to allow for the 10px of border width).

j08691 already has the box-sizing solution in his answer, so here is the box-shadow method (notice that I only added 1px of box shadow. This is because the border is still present providing half of the desired width):

 .action_box {   width: 300px;   height: 200px;   border: 1px solid black;   float: left;   margin-left: 10px;   margin-top: 10px; } .action_box p {   border: 1px solid black;   margin-top: 0px;   text-align: center; } .action_box:hover {   box-shadow: 0 0 0 1px black;   cursor: pointer; }

<div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div><div class="action_box">asdasds</div>

Border length smaller than div width?

You can use pseudoelements. E.g.

div {  width   : 200px;  height  : 50px;     position: relative;  z-index : 1;  background: #eee;}
div:before {  content : "";  position: absolute;  left    : 0;  bottom  : 0;  height  : 1px;  width   : 50%;  /* or 100px */  border-bottom:1px solid magenta;}

<div>Item 1</div><div>Item 2</div>

How to Give Border to Any Element Using CSS Without Adding Border-Width to the Whole Width of Element