How to Make Rounded Card for Ionic

Ionic Framework ionic-v3
1

I am attempting to create a rounded card for Ionic 2. I tried the method used for Ionic 1, but it is not working:

Added a <div class="card"> around the tag in my page.html, and then adding the following line to my variables.scss:
.card { border-radius : 5px; }

This doesn’t seem to be having any effect. It seems that there must be a different method to create rounded cardsin Ionic 2 vs. Ionic 1. How do I do this?

2

try to target ionic’s card component directly?

ion-card {
border-radius: 10px;
}

or try to make a card by yourself using CSS and html div.

1 Like
3

I figured out what is happening. It turns out that ion-card has some default background stylings that always show up regardless of whether you apply the border-radius. (I don’t know what is actually happening with the CSS that causes these to appear, and don’t know how to turn them off.) A solution I have found is to replace the ion-card with div, like:

<div>
  <ion-card-header>
    Card Header
  </ion-card-header>

  <ion-card-content>
    Card Content
  </ion-card-content>
</div>

Where the variables.scss contains the following:

div {
  background-color: inherit;
  border: 0px;
}

ion-card-header {
  background-color: red;
  border-radius: 10px 10px 0px 0px;
}

ion-card-content {
  background-color: blue;
  border-radius: 0px 0px 10px 10px;
}

I don’t know if there is an easier way to do this by simply getting rid of features of the ion-card CSS. Simply setting border-radius: 10px doesn’t do the job.

1 Like
4

The variables with card-border-radius in them. There’s three, one for each major platform.

2 Likes
5

I solved it like this:

in css:
ion-card {
border-radius:30px !important;
}

it overwrites standard ion-card css

1 Like