CSS Insert Borders

Question

I have a quick question about CSS borders.

I need to create a solid insert border. This is the CSS bit that I use:

border: 10px inset rgba(51,153,0,0.65);

Unfortunately, this creates a three-dimensional ribbed border (ignore the squares and dark description box):

http://dl.dropbox.com/u/12147973/border-current.jpg

This is the goal:

http://dl.dropbox.com/u/12147973/border-boal.jpg

Any ideas?

Answer 1

You can use box-shadow , perhaps:

 #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 10px #0f0; } 

 #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 10px #0f0; } 

 <div id="something"></div> 

This has the advantage that it overlays the background image of the div , but it is of course blurry (as you would expect from the box-shadow property). To create density shadows, you can add additional shadows, of course:

 #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0; } 

 #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0; } 

 <div id="something"></div> 

---

Edited because I realized that I was an idiot, and forgot to offer the simplest solution first, which uses a child otherwise-empty to apply borders on the background:

 #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; padding: 0; position: relative; } #something div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 10px solid rgba(0, 255, 0, 0.6); } 

 <div id="something"> <div></div> </div> 

---

Edited after @CoryDanielson comment below :

jsfiddle.net/dPcDu/2 you can add a 4 px parameter for box-shadow , which will distribute and will more easily reflect its images.

 #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5); } 

 <div id="something"></div> 

Answer 2

I would recommend using box-sizing .

 *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #bar{ border: 10px solid green; } 

Answer 3

To create a border insert inside an element, the only solution I found (and I tried all the sentences in this thread to no avail) is to use a pseudo-element like: before

for example

 .has-inset-border:before { content: "foo"; /* you need something or it will be invisible at least on Chrome */ color: transparent; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; border: 4px dashed red; } 

The box-sizing property will not work, since the border is always outside of everything.

The box-shadow options have a double drawback: they do not actually work and are not supported so widely (and, if you need to, require more CPU cycles for rendering).

Answer 4

This is an old trick, but I still think the easiest way to do this is to use outline-offset with a negative value (the example below uses -6px). Here's the fiddle : I made the outer border red and the outline white to distinguish between two:

 .outline-offset { width:300px; height:200px; background:#333c4b; border:2px solid red; outline:2px #fff solid; outline-offset:-6px; } <div class="outline-offset"></div> 

Answer 5

If you want to make sure that the border is inside your element, you can use

box-sizing:border-box;

this will put the following border inside the element:

border: 10px solid black;

(You will get a similar result using the optional inset parameter for box-shadow, but instead it is intended for a real border, and you can still use your shadow for something else.)

Pay attention to the other answer above: as soon as you use any inset for the box-shadow particular element, you are limited to a maximum of 2 box-shadows for this element and you need a div wrapper for further shading.

Both solutions should also save you unwanted 3D effects. Also note that both solutions are stackable (see the example I added in 2018)

 .example-border { width:100px; height:100px; border:40px solid blue; box-sizing:border-box; float:left; } .example-shadow { width:100px; height:100px; float:left; margin-left:20px; box-shadow:0 0 0 40px green inset; } .example-combined { width:100px; height:100px; float:left; margin-left:20px; border:20px solid orange; box-sizing:border-box; box-shadow:0 0 0 20px red inset; } 

 <div class="example-border"></div> <div class="example-shadow"></div> <div class="example-combined"></div> 

Answer 6

I do not know what you are comparing with.

But a super easy way to have an insert with a border compared to other non-border elements is to add border: ?px solid transparent; :? Px border: ?px solid transparent; to those who have no border.

This will make the frame an insert.

http://jsfiddle.net/cmunns/cgrtd/

Answer 7

If box-sizing not an option, another way to do this is to simply make it a child of the element's size.

Demo

CSS

 .box { width: 100px; height: 100px; display: inline-block; margin-right: 5px; } .border { border: 1px solid; display: block; } .medium { border-width: 10px; } .large { border-width: 25px; } 

HTML

 <div class="box"> <div class="border small">A</div> </div> <div class="box"> <div class="border medium">B</div> </div> <div class="box"> <div class="border large">C</div> </div> 

Answer 8

You can use background-clip: border-box;

Example:

 .example { padding: 2em; border: 10px solid rgba(51,153,0,0.65); background-clip: border-box; background-color: yellow; } <div class="example">Example with background-clip: border-box;</div> 

Answer 9

So, I tried to display the frame on hover, but it moved the entire bottom panel of the main menu, which did not look so good that I fixed it as follows:

 #top-menu .menu-item a:hover { border-bottom:4px solid #ec1c24; padding-bottom:14px !important; } #top-menu .menu-item a { padding-bottom:18px !important; } 

I hope this helps someone out there.

Answer 10

Simple SCSS solution with pseudo-elements

Demo Version: https://codepen.io/vlasterx/pen/xaMgag

 // Change border size here $border-width: 5px; .element-with-border { display: flex; height: 100px; width: 100%; position: relative; background-color: #f2f2f2; box-sizing: border-box; // Use pseudo-element to create inset border &:before { position: absolute; content: ' '; display: flex; border: $border-width solid black; left: 0; right: 0; top: 0; bottom: 0; border: $border-width solid black; // Important: We must deduct border size from width and height width: calc(100% - $border-width); height: calc(100% - $border-width); } } 

 <div class="element-with-border"> Lorem ipsum dolor sit amet </div> 

Answer 11

You can do it:

 .thing { border: 2px solid transparent; } .thing:hover { border: 2px solid green; } 

Answer 12

I know that this is three years, but I thought it might be useful to someone.

The concept is to use the: after (or: before) selector to place the border in the parent element.

  .container{ position:relative; /*Position must be set to something*/ } .container:after{ position:relative; top: 0; content:""; left:0; height: 100%; /*Set pixel height and width if not defined in parent element*/ width: 100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border:1px solid #000; /*set your border style*/ }