CSS border - just part of the line - css

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/

Answer 3

This is my improvements on John's answer.
I just fiddled with negative margins to make the border come up and wrap the container a bit.
.box {
position: relative;
min-height: 100px;
padding: 0 15px;
padding-bottom: 10px;
}
.box .bordered {
position: absolute;
height: 20px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 100%;
margin: -10px;
z-index: 1000;
}
<div class="box">
Hello world!
<br/>You are beautiful!
<div class="bordered"></div>
</div>

Answer 4

I'm sure there's no (regular) way to do this in CSS 2.1, and I'm not aware that CSS 3 supports this either. You may be able to do some trickery like creating a separate element behind the text, that is less high and has just a left, right, and bottom border. But that's not a solution one really wants to go for, of course.