Bootstrap: Border card-group doesn't work in a accordion collapse

[Jaapinator]

I have no idea if it is my problem but when I use a card-group in a accordion collapse it doesn't show borders properly.
Version: bootstrap 4.1.1
Browsers: IE, Edge, Chrome, Opera, Firefox
Code: https://codepen.io/anon/pen/qYvLdN

[InsanityMeetsHH]

May be it is a bug here
Or accordion is not 100% compatible with card group.

[Gehanii]

It affects any cards that might be used inside the accordion, which limits the accordion's utility somewhat. It appears that this is the result of the "fix" for the doubled-borders for the accordions (#23836).

[Gehanii]

Wouldn't changing the rule from .accordion .card:first-of-type to .accordion > .card:first-of-type resolve both issues? It certainly looks like it is in dev for me but I also have rotten luck these days when I post something... :)

[linusbrolin]

Possibly related:
The bottom border is not visible when the accordion only has one child.
So this section:

.accordion {
  .card:first-of-type {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

should really be changed to:

.accordion {
  .card:first-of-type:not(:last-of-type) {
    border-bottom: 0;
  }
  .card:first-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

[zhulb001]

I noticed this also, I just took the accordion example from the documentation and deleted the two last cards and the first card does not have a bottom border.

[Ruffio]

I'm also seeing this issue as I use single item accordion. I ended up with overruling by usage of !important

[fabswt]

Indeed, accordions with a single card do not display properly. They lose their round corners (top and bottom) and their bottom border:

P.S.: using this fix for now, until @linusbrolin's fix makes it to the source code:

/** Temporary fix for Bootstrap accordion bug -- see https://github.com/twbs/bootstrap/issues/26556 **/
.accordion .card:only-of-type {
    border-radius: .25rem;
    border: 1px solid rgba(0,0,0,.125);
}