# Container Component Problem with Border **URL:** \ **Category:** Elements\ **Created:** [June 21, 2025, 4:43pm UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239 "2025-06-21T16:43:33Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [June 21, 2025, 4:43pm UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/1 "2025-06-21T16:43:33Z")
Hi guys, I was including an Image Component into a Container. When I am now giving the Container a Border the Image in the Container is always above the Border. See screenshot. I played around with Z-Index but the result stays the same. Is that as it should be? Or a bug? ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/f/df758c731fe135e2f89ee241d4cadbb8420a61ed.jpeg) ---
**Author:** ![maxken](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@maxken](https://forums.realmacsoftware.com/u/maxken)\ **Post date:** [June 22, 2025, 4:30am UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/2 "2025-06-22T04:30:16Z")
Have you tried any of the following … 1. Setting the borders on the image component instead of on the container (or on both depending on the look you are after) or … 2. Adding spacing/margin to the image component to make space for the border on the container or … 3. Adding spacing/padding to the container to keep the image away from the border? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [June 22, 2025, 10:30am UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/3 "2025-06-22T10:30:35Z")
I _think_ this is exacted behavior due to the way HTML/CSS works. As @maxken suggested, you can add some padding to the container, just to bring the contents in a little. I tested this solution and it works just fine 👍 ![CleanShot 2025-06-22 at 11 .29.53@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/e/3e05fa7e4e5effcacdd2d0e54c48a3f7a66ae6b4.jpeg) ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [June 22, 2025, 10:55am UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/4 "2025-06-22T10:55:15Z")
Hi @maxken thanks for your suggestions! I tried them all and they are working well. @dan although the suggestions of Ken are working, is this really as it should be? The container on top should always have the lead and when there is an option for a border, the border should be visible and not below the sub-component. It took me nearly an hour to recognise that there is a border on the container but it is below the picture (the picture originally was set to fill the container in width and height, so the picture was completely covering the border of the container). ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [June 22, 2025, 11:02am UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/5 "2025-06-22T11:02:14Z")
ok another option is to use use the border on the container as intended, on the image component set the same size border and set the opacity of the image border to 0 not tried, but as long they are the size should be ok? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [June 22, 2025, 11:09am UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/6 "2025-06-22T11:09:21Z")
> [@WeaverPixel](#): > > The container on top should always have the lead and when there is an option for a border, the border should be visible and not below the sub-component. While it looks like it’s on top in the node tree, that’s not how it works. Sub-items are layered on top; this is how HTML/CSS works. Item 1 is the background. Anything inside of it will layer over it. Notice how the Container item sits on top of it, and the same applies to the SVG. If it were the other way around, you wouldn’t see any of the sub-items. The blue box and SVG would be hidden. ![CleanShot 2025-06-22 at 12 .07.07@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/1/01c50ea270c74910a7694cc7a634a72f43906e11.png) Hope that makes sense and clears up any confusion. ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [June 22, 2025, 11:53am UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/7 "2025-06-22T11:53:11Z")
not sure if this is the question / answer, I assume if it just the left righ tborders you want you would just set them, maybe something else you are asking not this ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [June 22, 2025, 12:43pm UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/8 "2025-06-22T12:43:50Z")
@dan, I understand your explanation and if this the way it should work I have to adjust my logic wether I like it or not 😀 @upssjw and @maxken thanks for your suggestions. What I want to achieve is a kind of “Bento-Gallery”. You can have a look at the below website: > **[RefleXions - Homepage](https://reflexions-elements.weaverpixel.com)** The images are in a container and have a hover “zoom effect”. What I want to achieve is an additional “photo frame” around the pictures. The “photo frame” should not zoom - therefore I thought a border around the container would be the right way, but learned it isn’t. ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [June 22, 2025, 12:56pm UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/9 "2025-06-22T12:56:36Z")
I got it. Putting a container with the image in a container is doing the trick. Sometimes the power of Elements is too much for me 😀 I have published it and if you want you can see it here: > **[RefleXions - Homepage](https://reflexions-elements.weaverpixel.com)** ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [June 22, 2025, 1:13pm UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/10 "2025-06-22T13:13:26Z")
Cool thats what I do You can even get the border to change color this way ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [June 22, 2025, 1:44pm UTC](https://forums.realmacsoftware.com/t/container-component-problem-with-border/48239/11 "2025-06-22T13:44:49Z")
yes, its the same way. Instead of changing the color I have added a shadow 🙂 Have a nice Sunday!