improves accordion styles

2 files changed, 30 insertions, 1 deletions

diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md
index 0e914a264..8c26630f9 100644
--- a/docs/4.0/components/collapse.md
+++ b/docs/4.0/components/collapse.md
@@ -66,7 +66,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference
 Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
 
 {% example html %}
-<div id="accordion">
+<div class="accordion" id="accordion">
   <div class="card">
     <div class="card-header" id="headingOne">
       <h5 class="mb-0">
diff --git a/scss/_card.scss b/scss/_card.scss
index 4c4845c0b..c4b9a725d 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -268,3 +268,32 @@
     }
   }
 }
+
+
+//
+// Accordion
+//
+
+.accordion {
+  .card:not(:first-of-type):not(:last-of-type) {
+    border-bottom: 0;
+    border-radius: 0;
+  }
+
+  .card:not(:first-of-type) {
+    .card-header:first-child {
+      border-radius: 0;
+    }
+  }
+
+  .card:first-of-type {
+    border-bottom: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .card:last-of-type {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}