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

Question

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

Like in Photoshop we can give stroke- Inside , center and out

Answer 1

As abenson said, you can use an outline but one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

With this html:

  
A block
  
Another block

One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

And the html:

  

    
A block
  
  

    
Another block