How can I remove border in ion-card in ionic?

Question

I've try many way to remove the border in my ion-card, but it not successfully. Please help me. Here is my css file:

   page-home {
     ion-card, .card-ios, .card-md {
        border: 0 !important;
        box-shadow: 0 !important;
        border: none !important;
        border-style: none !important;
        position: relative;
        text-align: center;
        // border-top: 3px solid colorofyourchosing
      }
      .card{
        border: 0 !important;
        box-shadow: 0 !important;
        border: none !important;
        border-style: none !important;
      }    }

Here is my html code in home.html

            <ion-card>
              <img (click)="goEnvi()" src="assets/imgs/envi.svg"/>
              <h6>{{"Enviroment" | translate}}</h6>
            </ion-card>

Thanks you

have you tried `box-shadow: none; webkit-box-shadow: none;` ? — Leo, Aug 24 '18 at 15:52
Thanks you Leo, box-shadow: none; is worked for me. Ionic doesnt know webkit-box-shadow property. — cauchuyennhocuatoi, Aug 24 '18 at 15:56
@Desperado Good to know, I was not aware of it. I wrote the answer in an official way — Leo, Aug 24 '18 at 15:59

score 24 · Answer 1 · answered Aug 24 '18 at 15:58

24

In your css file change

 box-shadow: 0 !important;

to

box-shadow: none !important;

answered Aug 24 '18 at 15:58

Leo

674
5
18

1

This works on Ionic 4 too. Thanks. I hope you can accept this answer. – Sampath Jan 28 '20 at 18:24
Works in Ionic 6 as well. Example if you want a simple border instead: My Content – George L Feb 04 '22 at 14:43

score 0 · Answer 2 · answered Jan 21 '20 at 05:46

0

.card
{
box-shadow:none !important
}

answered Jan 21 '20 at 05:46

Supriya

481
5
5

How can I remove border in ion-card in ionic?

2 Answers2