How to make a accordion-item in an accordion have a consistent border around it

Question

I am trying to make an accordion, for a project. I am using bootstrap and I want to make my accordion-items have a smooth, with round corners, border around them.

html:

<div class="container w-50">
        <div class="accordion" id="accordionFlushExample">
            <div class="accordion-item mb-2">
                <h2 class="accordion-header mb-0" id="flush-headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                        Question #1
                    </button>
                </h2>
                <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                    <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                        Animi id, earum quis mollitia illum beatae laboriosam ipsa architecto eaque, 
                        deleniti neque veniam odit quas laudantium dolor, nobis molestiae quibusdam assumenda.</div>
                </div>
            </div>
            <div class="accordion-item mb-2">
              <h2 class="accordion-header mb-0" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                    Question #2
                </button>
              </h2>
              <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                    Animi id, earum quis mollitia illum beatae laboriosam ipsa architecto eaque, 
                    deleniti neque veniam odit quas laudantium dolor, nobis molestiae quibusdam assumenda.</div>
              </div>
            </div>
            <div class="accordion-item mb-2">
                <h2 class="accordion-header mb-0" id="flush-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                    Question #3
                </button>
                </h2>
            <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                    Animi id, earum quis mollitia illum beatae laboriosam ipsa architecto eaque, 
                    deleniti neque veniam odit quas laudantium dolor, nobis molestiae quibusdam assumenda.</div>
            </div>
            </div>
        </div>

css:

.accordion-item{
    font-size: 0.5em;
    border: 0.2em solid var(--white);
    border-radius: 10px;
}
.accordion-item h2 button{
    text-align: left;
    text-decoration: none;
    color: var(--background-col);
    border-radius: 0;
    box-shadow: none !important;
}
.accordion-item h2 button:hover{
    text-decoration: none;
    box-shadow: none !important;
}
.accordion-item h2 button.collapsed{
    color: var(--background-col);
    box-shadow: none !important;
}
.accordion-item .accordion-body{
    padding-top: 0.5em;
}
.accordion-button:not(.collapsed){
    color: var(--background-col);
    background: var(--white);
    border: none;
}
.accordion-button:focus{
    border-color: var(--white);
}

With this "setup" I have managed to make my accordion show up like this:

But it is not correct. When I make my border red (just to see it), this is what I get:

I have tried to make borders to every element just to see if I could fix it in any other way, but I cannot, because I want the border to stay consistent when an accordion opens up. Can I do it with bootstrap, or I should make it from scratch myself?

Edit: I have a codepen in which I demonstrate the problem: https://codepen.io/BrainlessPOMO/pen/WNdzLXV

Answer 1

It has to do with precedence. If you use the id selector or use the classes from bootstrap to target first and last element of the accordion, as this will overwrite the 'default' from bootstrap, as shown below

body {
  padding: 2rem;
}

#accordionExample .accordion-item {
    font-size: 0.5em;
    border-top: 2em solid blue;
    border-bottom: 2em solid blue;
    border-left: 2em solid blue;
    border-right: 2em solid blue;
    border-radius: 14px;
}

.accordion .accordion-item + .accordion-item {
  margin-top: 2rem;
  border-top: 2em solid blue;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>