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

Css

Css Problem Overview

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 outside

I think default css border properties is center like center in photoshop, am i right?

I want to give border inside the box not outside. and don't want to include border width in box width.

Css Solutions

Solution 1 - Css

outline:1px solid white;

This won't add the extra width and height.

Solution 2 - Css

Check out CSS box-sizing...

The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.

  • -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  • -moz-box-sizing: border-box; /* Firefox, other Gecko */
  • box-sizing: border-box; /* Opera/IE 8+ */

I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Solution 3 - Css

Depending on your intended browser support you can use the box-shadow property.

You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).

Example:

box-shadow: 0 0 0 1px black; // Outside black border 1px

or

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

One great advantage of using box shadow is you can get creative by using multiple box shadows:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.

Solution 4 - Css

I ran into the same issue.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

This answer allows you to specify one single side. And would work in IE8+ - unlike using box-shadow.

Of course change your pseudo elements properties as you need to single out a specific side.

*** New and Improved ***

&:before {
content: '';
display: block;
position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

This allows ability to use border and hit multiple sides of a box.

Solution 5 - Css

Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.

Use outline to create a border OUTSIDE a div without modifying div width.

Here an example: https://jsfiddle.net/4000cae9/1/

Notes: border-box currently it is not supported by IE

Support:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

Solution 6 - Css

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:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

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:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

Solution 7 - Css

Use padding when there is no border. Remove padding when there is a border.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

Essentially, just replace the 2px padding with 2px borders. Div size remains the same.

Solution 8 - Css

In your case can you fudge it by subtracting half the border from the padding? (-2.5 from the padding if your border is 5px wide, you can't have negative padding so to go smaller reduce the overall width of the box). You can add an extra 2.5px to the margin to keep the overall box the same size.

I really don't like this suggestion, but I don't think there is a way do handle this cleanly.

Solution 9 - Css

Thus, you're trying to achieve the same as the well known IE box model bug? That's not possible. Or you want to support clients with IE on Windows only and choose a doctype which forces IE into quirksmode.

Solution 10 - Css

Usually, layout shifting is the problem.

If you don't need border-radius then outline: 1px solid black; works.

If you do, make the border transparent and change its color when it's supposedto show:

/* RELEVANT */
.my-div {
  border-radius: 8px;
  border: 2px solid transparent;
}

.my-div:hover {
  border: 2px solid #ffffffa8;
}



/* NOT RELEVANT */
.pretty {
  color: white;
  padding: 10px 20px;
  background: #0077b6;
  font-size: 16px;
  transition: border .15s ease-out;
  cursor:pointer;
}


<button class="pretty my-div">
  Button
</button>

Solution 11 - Css

Another option, if your background color is solid:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

Solution 12 - Css

outline:3px solid black || border:3px solid black

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}


<div>
hello world
</div>

Categories
Recommended Css Solutions

Previous Solution:

JavaScript: replace last occurrence of text in a string

JavascriptStringReplace

Next Solution:

Destructuring-bind dictionary contents

PythonSortingDictionary

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJitendra VyasView Question on Stackoverflow
Solution 1 - CssabensonView Answer on Stackoverflow
Solution 2 - CssChadView Answer on Stackoverflow
Solution 3 - CssJames BryantView Answer on Stackoverflow
Solution 4 - CssmikevoermansView Answer on Stackoverflow
Solution 5 - CssGibboKView Answer on Stackoverflow
Solution 6 - CssChrisDView Answer on Stackoverflow
Solution 7 - CssJake WilsonView Answer on Stackoverflow
Solution 8 - CssvfilbyView Answer on Stackoverflow
Solution 9 - CssBalusCView Answer on Stackoverflow
Solution 10 - CssakamichaelView Answer on Stackoverflow
Solution 11 - CssJake WilsonView Answer on Stackoverflow
Solution 12 - CssMatan ShushanView Answer on Stackoverflow