CSS Inset Borders

CSS Inset Borders

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>

How to do an inset border with a border radius on an image

Use an extra div and consider pseudo element:

.img {
  border-radius: 16px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.img:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 3px solid #fece40;
  inset: 16px;
}

img {
  display: block;
}

<div class="img"><img src="https://picsum.photos/id/237/200/200"></div>

Placing border inside of div and not on its edge

Set box-sizing property to border-box:

div {    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    width: 100px;    height: 100px;    border: 20px solid #f00;    background: #00f;    margin: 10px;}
div + div {    border: 10px solid red;}

<div>Hello!</div><div>Hello!</div>

CSS Outset/Inset, border and outline

Border and outline differences

Border: The border edge surrounds the box border. Its area counts the total size of the box model. You can specify size (border-width), color (border-color) and style (border-style) for each of the four possible borders (top, right, bottom and left). You can retrieve more info about border properties here.

Outline: Similar to border, but in this case do not take up space, opposite to border. Also, you can't style each border separately, the outline style applies to all the four sides of the box. Outline can be used together with border. Properties you can apply to outline are outline-color, outline-style and outline-width You can get more info about outline properties here.

Here's a box model representing outline and border

Border-styles: inset and outset

Inset: It's a border-style. The border makes the box look as if it was embedded in the canvas. You can use this border-style within border-color and border-width.

Outset: Another border-style. The opposite of 'inset': The border makes the box look as if is coming out of the canvas. You can use this border-style within border-color and border-width.

Documentation and sources

• How Do Browsers Render the Different CSS Border Style Values?
• W3C Box model specification
• W3C Border specification
• W3C Outline specification

Control the two colors of an inset border?

I don't think you can control it the way I mentioned, but for sure you can control the individual color of each border:

#myElement{
  border-style: solid;
  border-width: 1px;
  border-top-color: black;
  border-left-color: black;
  border-right-color: white;
  border-bottom-color: white;
}

CSS inset border radius with solid border

the demo:
Jsfiddle here

Code

figure {
  position: relative;
  width: 200px;
  height: 120px;
  margin: 100px auto;
  overflow: hidden;
  border: 1px solid black;
  border-right: none;
  border-bottom: none;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

figure:before,
figure:after {
  content: '';
  position: absolute;
}

figure:before {
  right: -50%;
  top: 0;
  background: transparent;
  width: 172px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100%;
  box-shadow: 0 0 0 100em red;
}

figure:after {
  left: -1px;
  bottom: 0px;
  height: 16px;
  width: 128px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 5px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

<figure></figure>

Adding border and inset box shadow?

CSS

#navContainer {
    width: 100%;
    border : 1px solid #000;
    background-color: #005073;
}

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

HTML

 <div id="navContainer" class="shadow"> 
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Website Design</a></li>           
                    <li><a href="#">Art & Poetry</a></li>  
                    <li><a href="#">Blog & Other</a></li>
                    <li><a href="#">Music & More</a></li>
                    <li><a href="#">Shop</a></li>  
                </ul>
            </nav>
            <div style="clear:both"></div> <!-- I've add this code -->
 </div><!--end of nav container div-->

Why doesn't the height of a container element increase if it contains floated elements?

that is why you have to add this code

and you have to remove bakcground-color attribute in your css "#navContainer a"

---

Related Topics