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

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 >
        <div  id="accordionFlushExample">
            <div >
                <h2  id="flush-headingOne">
                    <button  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"  aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                    <div >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 >
              <h2  id="flush-headingTwo">
                <button  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"  aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                <div >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 >
                <h2  id="flush-headingThree">
                <button  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"  aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                <div >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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div  id="accordionExample">
  <div >
    <h2  id="headingOne">
      <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"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div >
        <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 >
    <h2  id="headingTwo">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo"  aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div >
        <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 >
    <h2  id="headingThree">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree"  aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div >
        <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>