CODEWITHSUNDEEP
csshtmlborderpadding
pwnjack
pwnjack

Reputation: 1096

How can I setup a border inside the div

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?

Upvotes: 11

Views: 42917

Answers (6)

rorymorris
rorymorris

Reputation: 223

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); }

Upvotes: 0

Dishan TD
Dishan TD

Reputation: 8748

<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

Upvotes: 2

Daniel Perv&#225;n
Daniel Perv&#225;n

Reputation: 1716

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;
}

Upvotes: 6

Ben
Ben

Reputation: 98

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/

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128836

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.

Upvotes: 1

j08691
j08691

Reputation: 208022

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

Upvotes: 20

Related Questions