Need help: In giving border for Card view component

[Dilip_Adiga]

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

.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

I need something like below

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?

Thank you in advance for your help.

Regards,
Dilip

[MaximeBaker]

Try removing padding and margin.

[MaximeBaker]

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

[Dilip_Adiga]

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

[MaximeBaker]

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.

[Dilip_Adiga]

Hi @MaximeBaker ,

This is what I am getting for inspect element

<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

[Dilip_Adiga]

I Got it to work by using this @MaximeBaker

  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?

Regards,
Dilip

[MaximeBaker]

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.

[Dilip_Adiga]

Hi @MaximeBaker ,

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

[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

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

So that it looks like this?

Regards,
Dilip

[Dilip_Adiga]

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

[MaximeBaker]

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 ?

[MaximeBaker]

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.

[Dilip_Adiga]

Thank you I got how to isolate it.

Regards,
Dilip

[MaximeBaker]

I am glad it worked! Anytime!