CSS Inset Borders

Question

I need to create a solid color inset border. This is the bit of CSS I'm using:

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

Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)

Answer 1

You could use box-shadow, possibly:

#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 will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow 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 realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over 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's comment, below:

jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his 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 recomnend 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;   }