Double bottom border on collapsed cards

[janno42]

When collapsing cards (e.g. in an accordion), the header has a bottom border that is rendered on top of the bottom border of the card itself. It results in two borders to be rendered, which (especially for the last card with rounded edges) looks wrong:

Depending on the used browser and zoom settings there can even be a small gap between the two border lines.

#23839 improved the layout of cards as collapsible elements but didn't change the double bottom border.

I would expect that the border of the header is not shown for a collapsed card.

• Operating system: Windows 10
• Browser: Firefox 61.0.2
• Test case (taken from bootstrap documentation): http://jsbin.com/zomipatuci/edit?html,output

[MelissaWeirick]

Use the {border-collapse: collapse;} property? Sorry first response so still trying to figure out how Github Works

[royklutman]

I might have a fix for this, but I am not really sure if setting overflow: hidden on cards in an accordion is best practice, might also need some thorough review and testing:

.accordion {
  .card {
    overflow: hidden;
  }
  
  .card-header {
    margin-bottom: -1px;
  }
}

See this CodePen: https://codepen.io/anon/pen/JaGzNL?editors=1100#0

Maybe @andresgalante or @XhmikosR can shed some light on this case.

[XhmikosR]

The patch above seems fine, but I haven't tested it, just the logic makes sense. Feel free to make a PR to discuss any proposed fixes.