How to Make Rounded Card for Ionic

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?

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

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:

    Card Header

    Card Content

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

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


I solved it like this:

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

it overwrites standard ion-card css

1 Like