# Make rounded corners of the widget's container

**URL:** <https://community.elfsight.com/t/make-rounded-corners-of-the-widgets-container/35151>\
**Category:** Photo Gallery\
**Created:** [December 21, 2023, 11:35am UTC](https://community.elfsight.com/t/make-rounded-corners-of-the-widgets-container/35151 "2023-12-21T11:35:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 21, 2023, 11:35am UTC](https://community.elfsight.com/t/make-rounded-corners-of-the-widgets-container/35151/1 "2023-12-21T11:35:54Z")

</div>

Add this code to the Custom CSS field on the Style tab of your [Photo Gallery](https://elfsight.com/photo-gallery-widget/) widget’s settings:

```auto
.eapp-photo-gallery-photo-gallery-component {
  border-radius: 15px;
}

```

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [March 30, 2025, 10:19am UTC](https://community.elfsight.com/t/make-rounded-corners-of-the-widgets-container/35151/2 "2025-03-30T10:19:29Z")

</div>

@Max the code from Dec 2023 didn’t work for me anymore??  
I now have this solution for the slider layout.

```auto
[class*="eapp-photo-gallery-slider-item-image"] {
border-radius: 15px;
}

```

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 31, 2025, 1:28pm UTC](https://community.elfsight.com/t/make-rounded-corners-of-the-widgets-container/35151/3 "2025-03-31T13:28:31Z")

</div>

@Sina I’ve tested the code and seems to be working fine with all layouts:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/7/07ee81b7aa151787f794dcbbe31087f527698375.jpeg)

Could you please double-check it?

---

<div class="post-metadata">

**Author:** ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)\
**Post date:** [March 31, 2025, 1:32pm UTC](https://community.elfsight.com/t/make-rounded-corners-of-the-widgets-container/35151/4 "2025-03-31T13:32:32Z")

</div>

Hi @Max  
Unfortunately, I can’t double-check this. I’ve reached my widget limit here. 😕  
But I’ve tested it for the layouts I’m using.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 31, 2025, 1:44pm UTC](https://community.elfsight.com/t/make-rounded-corners-of-the-widgets-container/35151/5 "2025-03-31T13:44:26Z")

</div>

Ah, I see now!

This CSS code changes the border radius of the widget’s container and since the background in your widgets is transparent, you don’t see any effect.

If you set the colorful background, you’ll be able to see the changes 🙂