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
thanks
Best Regards
Farrukh
image

2 Likes

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.

7 Likes

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;
 }

Try

box-shadow: 0 !important;

If necessary.