Ion-card top border coloured line


#1

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


#2

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.


#3

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


#4

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:


#5

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


#6

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.