# Need help: In giving border for Card view component

**URL:** https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645
**Category:** Ask for Help
**Tags:** custom-css
**Created:** [May 1, 2025, 1:14pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645 "2025-05-01T13:14:55Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)
#### Post date: [May 1, 2025, 1:14pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/1 "2025-05-01T13:14:55Z")

</div>

Hi Guys,

I need some help in giving Border to my card view component. I know I need to use CSS and here is what I am currently using

```auto
.welcome-inner-card {
  border-top: 10px solid #4CAF50;
  border-left: 10px solid #4CAF50;
  border-right: 10px solid #4CAF50;
  border-bottom: 16px solid #4CAF50; /* Thicker at the bottom */
  border-radius: 16px;
  padding: 16px;
  background-color: white;
}

```

Its giving me border to the outer side like this

 ![Screenshot 2025-05-01 at 6.44.02 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a6c83f7794d390d35bf1ee6d4a0e8b0e8dfb4cec.png)

I need something like below

 ![Screenshot 2025-05-01 at 6.21.34 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73e495de542c1b23f4c9381cbf44d2734c59f7c8.png)

Can you guys kindly help me with this?

Is there a possibility of applying border to the Inner box of card view? Like marked in the image below?

 ![Screenshot 2025-05-01 at 6.40.23 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a69f230877eeb31341c7be31446e600fb17e08c4.png)

Thank you in advance for your help.

Regards,  
Dilip

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [May 1, 2025, 2:00pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/2 "2025-05-01T14:00:00Z")

</div>

Try removing padding and margin.

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [May 1, 2025, 2:00pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/3 "2025-05-01T14:00:50Z")

</div>

Did you select the right div in your custom CSS ? Seems like you selected the parent.

---

<div class="post-metadata">

### Author: ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)
#### Post date: [May 1, 2025, 2:17pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/4 "2025-05-01T14:17:01Z")

</div>

Hi @MaximeBaker ,

Thank you for replying.

> [@MaximeBaker](#):
>
> Did you select the right div in your custom CSS ? Seems like you selected the parent.

how can I select the inner element? is there any specific was I can select?

I just applied border and padding to the component via CSS

Regards,  
Dilip

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [May 1, 2025, 2:18pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/5 "2025-05-01T14:18:57Z")

</div>

Try with the Browser Inspector functionality. CTRL+SHIFT+C and click on the element. You will see the element in the DOM and you will be able to find the right one.

---

<div class="post-metadata">

### Author: ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)
#### Post date: [May 1, 2025, 2:21pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/6 "2025-05-01T14:21:26Z")

</div>

Hi @MaximeBaker ,

This is what I am getting for inspect element

````auto
<div class="card-collection-card ___StyledDiv6-sc-3njyrx-7 lhfuKJ"><div data-testid="card-image" class="card-collection-card___ StyledDiv7-sc-3njyrx-8 kjJTlC center aspect-sixteen-by-nine image-style-circle-size-medium"><div class="card-collection-card ___StyledDiv8-sc-3njyrx-9 jMOTUk"><div class="card-collection-card___ StyledDiv9-sc-3njyrx-10 cnanzr"><img src="https://res.cloudinary.com/glide/image/fetch/f_auto,w_500,c_limit/https%3A%2F%2Fstorage.googleapis.com%2Fglide-prod.appspot.com%2Fuploads-v2%2FkqFz2swaPf8zZ04eJFd7%2Fpub%2FNp2TQ9iYjrbBZZQcwzXJ.png" class="sc-fUnMCh itSONO card-collection-card ___StyledImg-sc-3njyrx-11 gZkbnq" style="display: block; background-color: transparent;"></div></div></div><div class="card-collection-card___ StyledDiv10-sc-3njyrx-14 nhuvM image-style-circle center card"><p class="card-collection-card ___StyledP-sc-3njyrx-16 jnJDwW"> Followers</p><h3 class="card-collection-card___ StyledH-sc-3njyrx-17 dOdzwM">@aurm_club</h3><div class="card-collection-card ___StyledDiv11-sc-3njyrx-19 eRfzUS"></div></div><div class="card-collection-card___ StyledDiv3-sc-3njyrx-2 cAwPgi needs-to-be-shown"><button aria-label="Test" data-testid="card-primary-button" class="sc-hmdomO wire-button ___StyledWireButtonStyle-sc-1tlscdy-0 fpGmYQ bnsHxb card-collection-card___ StyledWireButton-sc-3njyrx-3 jvgmJp sm filled" rel="noopener noreferrer"><div class="wire-button___StyledDiv2-sc-1tlscdy-2 emiXNg button-text">Test</div></button></div></div>```

Regards,
Dilip
````

---

<div class="post-metadata">

### Author: ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)
#### Post date: [May 1, 2025, 2:25pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/7 "2025-05-01T14:25:31Z")

</div>

I Got it to work by using this @MaximeBaker

```auto
  border-top: 10px solid #4CAF50;
  border-left: 10px solid #4CAF50;
  border-right: 10px solid #4CAF50;
  border-bottom: 40px solid #4CAF50;
  border-radius: 16px;
  padding: 16px;
  background-color: white;
}

```

But still there is gap between the button “Test” and button green, How can I remove it?

 ![Screenshot 2025-05-01 at 8.09.06 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/ef6b6e054ce270a1ad274cda0c34cc648ab14032.png)

Regards,  
Dilip

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [May 1, 2025, 2:42pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/8 "2025-05-01T14:42:41Z")

</div>

Try changing gap: …` in the container. Else, change margin-bottom of the button. But I am 99% sure that it is a gap in the container.

---

<div class="post-metadata">

### Author: ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)
#### Post date: [May 1, 2025, 2:57pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/9 "2025-05-01T14:57:52Z")

</div>

Hi @MaximeBaker ,

I could do that and push the button to the bottom without having the gap.

```auto
[data-testid="cc-card"]:nth-child(1) > div {
  border-top: 10px solid #4CAF50;
  border-left: 10px solid #4CAF50;
  border-right: 10px solid #4CAF50;
  border-bottom: 16px solid #4CAF50;
  border-radius: 16px;
  padding: 16px;
  background-color: white;
padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

/* Remove any spacing added after the button */
.card-collection-card___StyledDiv3-sc-3njyrx-2.cAwPgi {
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

```

got this far

 ![Screenshot 2025-05-01 at 8.31.18 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2e6c36e1d67df45b70989e0f088f10d9663b54bd.png)

But how can I make the button tough both left and right side?

So that it looks like this?

 ![Screenshot 2025-05-01 at 6.21.34 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73e495de542c1b23f4c9381cbf44d2734c59f7c8.png)

Regards,  
Dilip

---

<div class="post-metadata">

### Author: ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)
#### Post date: [May 1, 2025, 3:40pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/10 "2025-05-01T15:40:19Z")

</div>

Also observed that it’s now doing the same thing to other card view elements in my app. how can I prevent that?

@MaximeBaker

Regards,  
Dilip

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [May 1, 2025, 3:41pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/11 "2025-05-01T15:41:55Z")

</div>

You could probably just add a background color to the button container so it looks like the border. Is it possible or is the button directly in the same level then the image ?

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [May 1, 2025, 3:42pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/12 "2025-05-01T15:42:34Z")

</div>

Yes, you can limit to that specific collection by adding a custom css class name to the component and use it in the custom selector.

---

<div class="post-metadata">

### Author: ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)
#### Post date: [May 1, 2025, 4:09pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/13 "2025-05-01T16:09:50Z")

</div>

Thank you I got how to isolate it.

Regards,  
Dilip

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [May 1, 2025, 4:17pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/14 "2025-05-01T16:17:31Z")

</div>

I am glad it worked! Anytime!

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [May 8, 2025, 4:17pm UTC](https://community.glideapps.com/t/need-help-in-giving-border-for-card-view-component/81645/15 "2025-05-08T16:17:51Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.