CODEWITHSUNDEEP
cssborder
Sunkhern
Sunkhern

Reputation: 278

Make a div borders overlap when height is 0

my question is quite simple, I would like top and bottom border to overlap when height is 0px, is this possible?

here's my jsfiddle:

https://jsfiddle.net/7zwury9q/

<div class="test">

</div>

.test {
  width:          100px;
  height:         0px;
  border-style:   solid;
  border-color:   black;
  border-width:   1px;
}

Upvotes: 1

Views: 766

Answers (2)

Jan Mellstr&#246;m
Jan Mellstr&#246;m

Reputation: 215

You can add another div inside that is the bottom border and remove the bottom border on the big div. But I had to remove the 'height'.

See fiddle for example.

HTML:

<div class="test">
<!-- uncomment me -->
<div class="bottomBorder"></div>
</div>

CSS:

.test {
  width: 100px;
  border: 1px solid #000;
  border-bottom: none;
}
.bottomBorder {
  border-top: 1px solid #000;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
}

https://jsfiddle.net/7zwury9q/1/

You can also do with position relative & absolute:

https://jsfiddle.net/7zwury9q/2/

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39382

Yes, possible but not with border css property.

The idea is to draw top line with :before pseudo element and the bottom line with :after pseudo element.

An element having class box can be styled as follows:

.box:before,
.box:after {
  position: absolute;
  background: #000;
  content: '';
  height: 1px;
  right: 0;
  left: 0;
  top: 0;
}
.box:after {
  bottom: -1px; /* notice this value should be -1 */
  top: auto;
}


.test {
  animation: example 2s linear infinite alternate;
  position: relative;
  background: orange;
  margin: 0 auto;
  width: 100px;
  height: 0;
}

.test:before,
.test:after {
  position: absolute;
  background: #000;
  content: '';
  height: 1px;
  right: 0;
  left: 0;
  top: 0;
}
.test:after {
  bottom: -1px;
  top: auto;
}
@keyframes example {
  0%   {height: 0;}
  100% {height: 100px;}
}
<div class="test"></div>

Upvotes: 1

Related Questions