11

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:

circle inside-borded

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?

1
  • Note: The border: dashed/dotted; is not working in Firefox, it renders as solid anyway (when border-radius is applied).
    – pwnjack
    Commented Jun 4, 2013 at 11:28

6 Answers 6

20

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

1
  • 1
    Thanks that's exactly what i wanted, the shadow is exceeding the circle's 200px tough, but with that property i can easily reduce it to 195px and have a 3px shadow and 2px border to keep it inside the measures! thanks.
    – pwnjack
    Commented Jun 3, 2013 at 15:44
6

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;
}
1
  • Thanks for introducing the box-sizing property, that's very useful for obtaining that effect in the prefixed dimensions.
    – pwnjack
    Commented Oct 31, 2013 at 14:06
2
<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

enter image description here

0
1

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.

2
  • I'm aware of the vendor-prefixes i didn't use them in my example just to keep it simple, but thanks anyway for precising it, and to share that "caniuse" website, that's very usefull! ;)
    – pwnjack
    Commented Jun 3, 2013 at 15:51
  • I was mentioning it more for the box-shadow property over your example code. -webkit-box-shadow and -moz-box-shadow specifically. Commented Jun 3, 2013 at 16:11
0

I suppose you could add another class to the circle.

I have done this for you.

I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.

.scirle {see fiddle}

http://jsfiddle.net/hpLYD/7/embedded/result/

0
0

The problem is a border takes up screen real estate whether we like it or not.

If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.

An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:

.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.