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

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.

Answer 2

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.

Answer 3

outline:1px solid white;

This won't add the extra width and height.

Answer 4

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.

Answer 5

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
}