CSS border - just part of the line

Question

Is there a way how to use css (ideal) to draw element border but just a part of the line (in the image below left and right border)?

Answer 1

Yes, you can, like this, and even IE8 can do this:

div {
    position: relative;
    width: 100px;
    padding: 10px;
}
div:before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    border: 1px solid black;
    border-top-width: 0;
}

<div>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>

Answer 2

Please try this:

.box {
  position: relative;
  min-height: 100px;
  padding-bottom: 10px;
}
.box .text {
  margin: 10px;
}
.box .bordered {
  position: absolute;
  bottom: 0;
  height: 30%;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 100%;
  z-index: 1000;
}

<div class="box">    
    <div class="text">Hell world!</div>
    <div class="bordered"></div>
</div>

see the fiddle here: https://jsfiddle.net/42zgo5aa/3/