How can I setup a border inside the div

Question

I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.

I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words

I want this:

Here is my code:

http://jsfiddle.net/hpLYD/1/

The CSS:

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid blue;
}

Padding property is expanding the whole div including the border.

How can I achieve that effect using only css? is it possible?

Solution 1

You can do this using the CSS3 property box-shadow. Add the following to your CSS:

box-shadow: 0px 0px 0px 5px #f00;

jsFiddle example

Solution 2

While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).

You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.

Here's an JSFiddle with the result

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid red;
    box-shadow: 0px 0px 0px 5px blue inset;
    box-sizing: border-box;
}

Solution 3

<div class="mydiv"></div>

.mydiv{
  position:relative;
  height:150px;
  width:200px;
  background:#f00;
}
.mydiv:before{
  position:absolute;
  content:'';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left:10px;
  right: 10px;
  border:1px solid #daa521;
}

Here's an JSFiddle with the result

Solution 4

You can't place a border within an element, however you can use box-shadow to give that effect:

.circle {
    border-radius: 50%;
    width: 190px;
    height: 190px;
    background: red;
    border: 3px solid blue;
    box-shadow:  0px 0px 0px 10px red; /* 10px box-shadow */
}

JSFiddle example.

Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadow for support.

View more solutions