CODEWITHSUNDEEP
css
cercxtrova
cercxtrova

Reputation: 1671

How to make border-left above border-bottom?

I have a Bootstrap list-group that looks like:

Bootstrap list-group screenshot

This is my CSS:

$border: 1px solid rgba(0, 0, 0, 0.125);

.customer-orders-filters {
  .list-group {
    box-shadow: $card-box-shadow;
    color: $text-color;
    font-weight: bold;

    .list-group-item {
      border-left: none;
      border-right: none;
      border-bottom: $border;

      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: none;
      }
      &.active {
        border-left: 5px solid $blue;
      }
    }
  }
}

As you can see, the border-left bottom is not very right. I tried to remove the border-bottom on the first-child, then add a border-top to the nth-child(2) but that doesn't work, the border-top is not present. I also tried to set a border-style: outset to the border-bottom of the first-child but without effect.

I would like that the border-left be totally above or totally under the border-bottom, but not half...

Do you know how could I fix it? Should I use a pseudo-element?

Upvotes: 1

Views: 2100

Answers (2)

Temani Afif
Temani Afif

Reputation: 274252

Consider using a background and border like below:

.box {
  width:200px;
  height:50px;
  padding-left:5px;
  border-bottom:2px solid red;
  background:linear-gradient(blue,blue) left/5px 100% no-repeat;
}
<div class="box"></div>

Or the opposite:

.box {
  width:200px;
  height:50px;
  padding-bottom:2px;
  border-left:5px solid blue;
  background:linear-gradient(red,red) bottom/100% 2px no-repeat;
}
<div class="box"></div>

You can also do with box-shadow:

.box {
  width:200px;
  height:50px;
  padding-left:5px;
  border-bottom:2px solid red;
  box-shadow:5px 0 0 blue inset;
}
<div class="box"></div>

Upvotes: 2

emmzee
emmzee

Reputation: 640

It looks like the problem is being caused by Bootstrap adding "margin-bottom: -1px;" to the .list-group-item class. Overwriting that rule (and moving the border line to the bottom) seems to fix the issue. (At least in Chrome, I didn't test other browsers.)

Ex:

.list-group-item {
  border-left: none;
  border-right: none;
  border-top: $border !important;
  border-bottom: 0;
  margin-bottom: 0;
  ... etc ...

Pen: https://codepen.io/anon/pen/moyOGg

Note that making this change may have other consequences (the Bootstrap devs must have put that -1px margin rule in there for a reason) so you'll need to do some more testing!

Upvotes: 0

Related Questions