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