March 8, 2012

Ajustment of Border in CSS

Question by sandbox

I want a border of Div to be less than the width of div. How to implement that in CSS?

Following image will give you more Clarity:

http://imageshack.us/photo/my-images/440/divkr.jpg/

Answer by Curt

This is not possible with plain CSS.

You could however use two div’s to get this effect.

<div class="outer">
<div class="inner">

    text

</div>
</div>​

.outer
{
    background-color:blue;
padding:20px;
    width:200px;
}

.inner
{
    border:solid 1px white;
    height:150px;
    color:white;
}


http://jsfiddle.net/RreTH/

http://jsfiddle.net/RreTH/1/

Answer by Starx

That is not possible.

Border is always the outside of element’s box model. However there might be a workaround you would like.

<div>
   <div id="inner" style="border:5px #000 solid;">
   </div>
</div>

Now, in this example, the border of #inner, will never exceed that of the parent.

As for the demonstration part, check this.

You will notice, the outer div has a thin red line to mark its border, but the inner div’s border can act as outer div‘s inner border.

Hope it helps

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!