Forum | Appery.io

Hi
There seems to be a problem with the styling of images appearing in a list. I am simply styling the images to be round using the following css that is applied to the image.

.profile_image {
border-radius:50%;
margin:10px;
border: 4px;
}

All images in the list display correctly except for the first and last list item as can be seen from the image. As you can notice, the circle is not completed properly. This is strange as it only occurs on the 1st and last record or list item retrieved from the db.

Hello,

Please check CSS properties:
preborder-top-left-radius/pre for the first item
and
preborder-bottom-left-radius/pre for the last item
They might have bigger priority that yours custom CSS

Hi
All items use the same CSS. How do i set it differently for first and last item if list is populated from database?

Please use nth-first-child and nth-last-child CSS clauses for that. Here you can find examples: https://css-tricks.com/useful-nth-chi...

Thank you

seems like it only needed... !important

border-radius:50% !important;