Best IT Recipes

How to pass border to any element using css without adding border width for the whole width of the element?

How to pass border to any element using css without adding border width for the whole width of the element?

As in Photoshop, we can give a touch inside, in the center and outside

I think the default border css properties are in the center, like the center in Photoshop, am I right?

I want to give the border inside the box not outside. and don’t want to include the width of the field in the width of the window.

+68
css css3
May 01 '10 at 2:22 a.m.
source share
11 answers
outline:1px solid white;

This will not add extra width and height.

+159
Nov 29 2018-11-11T00:
source share

Mark the CSS window size ...

A CSS3 property with CSS window size can do this. The border-box value (as opposed to the default content field) makes the final display box the declared width, and any border and padding are cut inside the field. Now you can safely declare your element 100% wide, including indentation and pixel-based borders, and achieve the whole goal.

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

I would suggest creating a mixin to handle this for you. More information on window size can be found on the W3c page http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

+18
Jul 31 '14 at 23:05
source share

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 any thickness. The great thing about the shadow box is that you can control whether it will be brought out (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

A huge advantage of using a shadow window is that you can get creative using a few box shadows:

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

The only thing I can’t say is that this will do the rendering. I would suggest that this could be a problem if you had hundreds of elements that used this method on screen right away.

+16
Feb 10 '13 at 23:50
source share

I ran into the same problem.

 .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 side. And it will work in IE8 + - as opposed to using box-shadow.

Of course, change the properties of the pseudo-elements, since you need to highlight 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 you to use the border and remove multiple sides of the window.

+13
May 03 '13 at 16:21
source share

As abenson said, you can use outline , but one of them is that Opera can draw a “non-rectangular shape”. Another option that seems to work is to use negative fields like 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>

Another less clean option is to add extra markup in html. For example, you set the width of the outer element and add a border to the inner. CSS:

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

And html:

 <body> <div class="outer"> <div class="inner">A block</div> </div> <div class="outer"> <div class="inner">Another block</div> <div> </body>
+5
Apr 26 2018-12-12T00:
source share

Use box-sizing: border-box to create an INSIDE border, without changing the width of the div.

Use outline to create an OUTSIDE div frame without changing the width of the div.

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

Notes: border-box is currently 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>
+4
Mar 17 '15 at 14:07
source share

In your case, can you pull it out by subtracting half the border from the gasket? (-2.5 from indentation, if your border is 5 pixels wide, you cannot have a negative padding to reduce the size of the entire width of the box). You can add an extra 2.5px to the stock so that the total box size is the same.

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

+2
May 01 '10 at 2:50
source share

Use a pad when there is no border. Remove the gasket 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 2px padding with 2px borders. Div size remains the same.

+2
Jan 24 '14 at 21:23
source share

So you are trying to achieve the same thing as the known IE box model error? It's impossible. Or do you want to support clients using IE only on Windows and choose a doctype that forces IE to quirksmode .

+1
May 01 '10 at 2:34
source share

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 }
0
Jan 24 '14 at 21:24
source share

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>
0
Nov 13 '17 at 8:34 on
source share


More articles:


All Articles