# Accordion V3 question for rounded corners

**URL:** <https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288>\
**Category:** Website Builder\
**Tags:** cms\_presets, cms\_usability\
**Created:** [December 9, 2021, 4:10am UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288 "2021-12-09T04:10:17Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Harris](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@David\_Harris](https://community.sitejet.io/u/David_Harris)\
**Post date:** [December 9, 2021, 4:10am UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/1 "2021-12-09T04:10:18Z")

</div>

I am using the accordion V3 preset, and I would like to put a border around all of the triggers like the red line in my screenshot. Is this possible? I imagine it will have to be done with css, but I cannot figure out how to target just the first column of the grid.

In theory, I would like it to have a border with rounded corners and a white background.

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/f105e957d5d5cfb0867b8876f3f86dd78e203c37.jpeg)

---

<div class="post-metadata">

**Author:** ![Kamil](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kamil/32/94_2.png) [@Kamil](https://community.sitejet.io/u/Kamil)\
**Post date:** [December 9, 2021, 8:03am UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/2 "2021-12-09T08:03:15Z")

</div>

Hello, just to be sure you want to achieve something like this?

 ![Image 2021-12-09 at 9.00.26 AM](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/aa4441cb64d28f65618ad92288c7896a8da159d9.jpeg)

---

<div class="post-metadata">

**Author:** ![David\_Harris](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@David\_Harris](https://community.sitejet.io/u/David_Harris)\
**Post date:** [December 9, 2021, 11:12am UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/3 "2021-12-09T11:12:02Z")

</div>

Yeah that is exactly what I want. Can you tell me how you achieved that?

---

<div class="post-metadata">

**Author:** ![Kamil](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kamil/32/94_2.png) [@Kamil](https://community.sitejet.io/u/Kamil)\
**Post date:** [December 9, 2021, 11:33am UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/4 "2021-12-09T11:33:36Z")

</div>

Here is the screenshot. Check accordion trigger settings and CSS. You need to find selector for the first and last tab, so you can apply round corners.

 ![Image 2021-12-09 at 12.23.28 PM](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/01436bc4bd16f2ae05fa7e4cff4a943bc0aee00d.jpeg)

---

<div class="post-metadata">

**Author:** ![David\_Harris](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@David\_Harris](https://community.sitejet.io/u/David_Harris)\
**Post date:** [December 9, 2021, 1:17pm UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/5 "2021-12-09T13:17:22Z")

</div>

Thanks so much for the help. I dont know why I couldn’t figure that out. It was so simple lol. Here are the results:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/589d2feb7d59c3fcd0450da9b6a78c4b825af46b.jpeg)

---

<div class="post-metadata">

**Author:** ![Kamil](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kamil/32/94_2.png) [@Kamil](https://community.sitejet.io/u/Kamil)\
**Post date:** [December 9, 2021, 1:30pm UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/6 "2021-12-09T13:30:02Z")

</div>

It looks really nice 👍

---

<div class="post-metadata">

**Author:** ![David\_Harris](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@David\_Harris](https://community.sitejet.io/u/David_Harris)\
**Post date:** [December 11, 2021, 5:41am UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/7 "2021-12-11T05:41:06Z")

</div>

Do you happen to know how to change the annimation? It looks very bad. Please check it out here:

> **[TheWebsiteFoundryV3 - Berlin](http://1eacdb-53eae.preview.sitejet.io/)**
>
> TheWebsiteFoundryV3

---

<div class="post-metadata">

**Author:** ![Kamil](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kamil/32/94_2.png) [@Kamil](https://community.sitejet.io/u/Kamil)\
**Post date:** [December 11, 2021, 7:31am UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/8 "2021-12-11T07:31:42Z")

</div>

It seems that content round corners is causing the flickering. Try to set them to 0 and add padding to the content. Then set the content background colour to transparency and then add round corners to each image and text separately. Maybe this will work.

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [March 25, 2022, 1:35pm UTC](https://community.sitejet.io/t/accordion-v3-question-for-rounded-corners/1288/9 "2022-03-25T13:35:32Z")

</div>


