CODEWITHSUNDEEP
css
Petr
Petr

Reputation: 1219

CSS border - just part of the line

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)?

enter image description here

Upvotes: 5

Views: 3463

Answers (4)

Asons
Asons

Reputation: 87191

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>

Upvotes: 9

John Diaz
John Diaz

Reputation: 361

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/

Upvotes: 2

blurfus
blurfus

Reputation: 14031

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>

Upvotes: 1

Dabbler
Dabbler

Reputation: 9863

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.

Upvotes: 0

Related Questions