Border Within Border CSS

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 border inside padding

Use padding, that's inside the border:

div {    box-sizing: border-box;    display: inline-block;    width: 150px;    border: 1px solid #CCC;    padding: 30px 20px;}

<div style="border: 1px solid #AAA">
  <p>    Hey!  </p>
</div>

Inner border CSS - Possible

You can use an inset box-shadow. DEMO

button {
    border: solid 1px #aaa;

    // Adds the inner "border"
    box-shadow: 0 0 1px #fff inset;

    background-image: linear-gradient(to bottom, #cfcfcf 0%, #c0c0c0 100%);
    padding: 20px;
    border-radius: 10px;
}

If you want to set the "width" of the border you can use a fourth value. Example with 3px wide inset box-shadow:

box-shadow: 0 0 0 3px #fff inset;

More info on box-shadows, MDN

Border within border CSS

When the main triangle or arrow is itself created using the CSS borders, it is impossible to add another border to it without using extra elements. The below are a few options.

Option 1: Using a bigger size pseudo-element and positioning it behind the parent to produce a border-effect.

.arrow-down {  position: relative;  width: 0;  height: 0;  border-left: 20px solid transparent;  border-right: 20px solid transparent;  border-top: 20px solid #ccc;}.arrow-down:before {  position: absolute;  content: "";  left: -22px;  top: -20px;  height: 0px;  width: 0px;  border-left: 21px solid transparent;  border-right: 21px solid transparent;  border-bottom: 21px solid transparent;  border-top: 21px solid black;  z-index: -1;}

<div class="arrow-down"></div>

CSS border within a border?

A couple of options:

Use border + outline
Use pseudo elements
Use multiple box-shadows
Use border-image

Googling any of those brings up loads of resources

Now that I've seen the screen grab, I reckon a combination of border top plus some box-shadows is your answer: http://jsfiddle.net/ne9nm/

Edit: Update the JSFiddle to show two possible solutions; one using box-shadows, and one using a pseudo element.

The HTML:

<div id="example-1">Example 1</div>
<div id="example-2">Example 2</div>

The CSS:

  div {
      background:rgb(100, 150, 100);
      width:100px;
      height:100px;
      padding:30px;
      margin:20px;
  }
  #example-1 {
      border-top:1px white dotted;
      box-shadow: inset 0 5px 0 grey, 0 -5px 0 grey
  }
  #example-2 {
      border-top:10px solid grey;
      position:relative;
  }
  #example-2:before {
      content:"";
      position:absolute;
      width:100%;
      height:0;
      border-top:1px white dotted;
      top:-5px;
      left:0;
  }

How to add border inner side of image using CSS

That one's quite simple. Put the image in a container, and give it an after. Give that after a absolute position and a border.

See the example:

.gallery {  height: 300px; /* change/remove as required */  width: 400px; /* change/remove as required */  border-radius: 10px; /* change/remove as required */  overflow: hidden;  position: relative;}
.picture:after {  position: absolute;  top: 10px;  left: 10px;  right: 10px;  bottom: 10px;  border: 2px solid pink;  border-radius: 10px;  content: '';  display: block;}

<div class="gallery">    <div class="picture">            <img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="http://lorempixel.com/400/300" alt="Picture of $25 Virtual Gift Card">
    </div></div>

Possible to place border on inside of padding using only one div?

Try this:

#bor-outline {
  width: 100px;
  height: 100px;
  background: grey;
  border: 4px solid #292929;
  outline: 4px solid #e3e3e3;
}

<div id="bor-outline">
  hello
</div>

Double border with different color

Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:

body {  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);  background-repeat: no-repeat;  height: 100vh;}.double-border {  background-color: #ccc;  border: 4px solid #fff;  padding: 2em;  width: 16em;  height: 16em;  position: relative;  margin: 0 auto;}.double-border:before {  background: none;  border: 4px solid #fff;  content: "";  display: block;  position: absolute;  top: 4px;  left: 4px;  right: 4px;  bottom: 4px;  pointer-events: none;}

<div class="double-border">  <!-- Content --></div>

How do I achieve a thick border with inner border radius only

the simple way: you can have 2 dives 

<div class="a">
   <div class="b">
   </div>
</div>

.b{
    display: block;
    width: 50px;
    height: 50px;
    background-color: yellow;
    border-radius: 5px;
}
 .a{
    border: 15px solid;
    width: auto;
    height: auto;
    display: inline-block;
    background-color: black;
}