Ion-card top border coloured line

Dear All !
I have tried a lot to get this effect of top border but couldnt apply it
Can some one please suggest how to display this line on top of ion-card or at the bottom
Best Regards


It’s actually pretty easy. Just apply a border top to the ion-card element like this:

ion-card {
   border-top: 3px solid colorofyourchosing

Same story for the bottom of the card. Then you could use border-bottom.


Thanks a lot, You saved my day. It worked :slight_smile:

1 Like

You’re welcome, glad it’s working now!

If you mark the answer as te solution to your question, it’s easier for others to find it back on the forum as a solved question :slight_smile:

Is it possible to remove the shadow of an ion card…?

Im assuming you can just set the shadow property to 0 (not 100% sure what it is named)

ion-card, .card-ios, .card-md {
 box-shadow: 0;


box-shadow: 0 !important;

If necessary.