# How to set borderBottomRadius='15px' when I toggle hide?

**URL:** <https://forums.ankiweb.net/t/how-to-set-borderbottomradius-15px-when-i-toggle-hide/23703>\
**Category:** Card Design\
**Created:** [October 6, 2022, 7:16pm UTC](https://forums.ankiweb.net/t/how-to-set-borderbottomradius-15px-when-i-toggle-hide/23703 "2022-10-06T19:16:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dxxxxp](https://avatars.discourse-cdn.com/v4/letter/d/67e7ee/32.png) [@dxxxxp](https://forums.ankiweb.net/u/dxxxxp)\
**Post date:** [October 6, 2022, 7:16pm UTC](https://forums.ankiweb.net/t/how-to-set-borderbottomradius-15px-when-i-toggle-hide/23703/1 "2022-10-06T19:16:44Z")

</div>

When the white part of the section is open, the bottom radius is round and nice.  
 ![radius-round](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/4/4eedd161fa9ce3216355f8a2ba137eb0cae7b722.png)

Until I unfold the section, the bottom radius becomes sharp and NOT very favorable. How to set borderBottomRadius=‘15px’ when hiding the bottom part of the section like “Please Help!!”?  
 ![radius-sharp](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/b/bc9d81ff35da17d03ec36e5cce21837b68fe2dfc.png)

I have tried my best to search for solutions and I really found one as below.  
ht tps://forums.ankiweb.net/t/custom-javascript-toggle-button-not-working-and-unsure-why/17345

BUT! The problem is that I really know nothing about styling, I would really appreciate it if you styling MASTERS can help me solve the problem!!

Here is the apkg.  
ht tps://gofile.io/d/GbJWCX

(Please delete the space between ht & tps to access 'cause there came out a dialogue telling me that I can’t post links. Sorry for the inconvenience! )

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [October 8, 2022, 7:03am UTC](https://forums.ankiweb.net/t/how-to-set-borderbottomradius-15px-when-i-toggle-hide/23703/2 "2022-10-08T07:03:14Z")

</div>

The easiest approach for such collapsibles is to give the common parent element a border-radius. Go to the `.section` rule and you’ll see that there’s already a 10px border radius set.

Why doesn’t it work then? Well, by default the children will simply overflow the parent and nothing happens, even though the border of the parent is rounded.

We need to tell the browser how to handle overflow on your `.section` elements. Simply insert `overflow: hidden` into the CSS rule:

```auto
.section {
  overflow: hidden; /* <- this will fix your issue */
  color: #414141;
  etc ...
}

```

* * *

Side note: Your Styling section contains HTML and JavaScript (i.e. stuff wrapped in `<style>` and `<script>` tags). These will not have any effect - you can simply delete everything that isn’t CSS - almost half of the content.

---

<div class="post-metadata">

**Author:** ![dxxxxp](https://avatars.discourse-cdn.com/v4/letter/d/67e7ee/32.png) [@dxxxxp](https://forums.ankiweb.net/u/dxxxxp)\
**Post date:** [October 8, 2022, 7:47am UTC](https://forums.ankiweb.net/t/how-to-set-borderbottomradius-15px-when-i-toggle-hide/23703/3 "2022-10-08T07:47:28Z")

</div>

Thanks a lot! YOU ARE FANTASTIC!!  
It’s so elegant and worked like a charm!!  
And thank you sincerely for the side note I’ll give it a try!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:33am UTC](https://forums.ankiweb.net/t/how-to-set-borderbottomradius-15px-when-i-toggle-hide/23703/4 "2023-05-01T07:33:45Z")

</div>