Can you create a card without a border?

Ionic Framework ionic-v3
1

I’m trying to do something like

ion-card {
  border-style: none;
}

In my .scss

2

yes but that’s wrong CSS.

border: none !important;

will do the job

3

This doesn’t seem to work.

In my home.scss

page-home {
  ion-card {
    border: none !important;
  }
}

In my home.html

<ion-content padding>
  <ion-card>
    <img src="assets/imgs/foo.jpg"/>
    <ion-card-content>
    <ion-card-title>Foo Title</ion-card-title>
    <p>FooBar</p>
    </ion-card-content>
    </ion-card>
</ion-content>
4

Whenever you have trouble styling an element, use Chrome’s dev tools to inspect the actual CSS that is being applied. Not only will see the class that is used, you may also see how the effect is being applied.

In this case, there are no borders being used, instead Ionic is using a box-shadow to apply the ‘border’. The advantage is the actual spacing of the element is not affected by the border.

    .card, .card-md, .card-ios {
        webkit-box-shadow: none;
        box-shadow: none;
    }
}```
3 Likes