spund3 spund3 - 6 months ago 12
HTML Question

Placing borders inside a div without "box-sizing" property nor shadows

I'm searching a way to place a bottom-border inside a div. I searched around the web including SE) and I've found two solutions that aren't useful for me:



  • Using
    box-sizing: border-box;
    , but it doesn't work for me. It seems that doesn't exists that property (nor Bluefish o Firefox doesn't recognize it )

  • Using
    box-shadow
    , but the shadows surround the entire div and I only want top draw a border at the bottom of the div.



Exists a solution for this? if not, how can I solve the
box-sizing
property problem?

Thanks!

Answer

You can do this using pseudo-elements, simply place a pseudo-element on the bottom with a background of your choice

Bottom only

.box{
  width:200px;
  height:100px;
  background:grey;
  padding-bottom:5px;
  position:relative;
}

.box:after{
  position:absolute;
  content:"";
  bottom:0;
  height:5px;
  width:100%;
  background:red;
}
  
<div class="box"></div>

Top only

.box{
  width:200px;
  height:100px;
  background:grey;
  padding-top:5px;
  position:relative;
}

.box:after{
  position:absolute;
  content:"";
  top:0;
  height:5px;
  width:100%;
  background:red;
}
  
<div class="box"></div>

Both top and bottom

.box{
  width:200px;
  height:100px;
  background:grey;
  padding:5px 0;
  position:relative;
}

.box:after{
  position:absolute;
  content:"";
  top:0;
  height:5px;
  width:100%;
  background:red;
}
  
.box:before{
  position:absolute;
  content:"";
  bottom:0;
  height:5px;
  width:100%;
  background:red;
}
<div class="box"></div>

You can also put it on all four sides

.box{
  width:200px;
  height:100px;
  background:grey;
  padding:5px;
  position:relative;
}

.box:after{
  position:absolute;
  content:"";
  top:0;
  left:0;
  height:calc(100% - 10px);
  width:calc(100% - 10px);
  border:5px solid #00CCFF;
}
  
<div class="box"></div>

Comments