Add rounded corners for ion-list

Ionic Framework Ionic Angular
1

How do I make a similar style like this to my ion-lists/items that contain an input?

133906186-b44cb0d0-9ad2-40aa-9a5e-1d456a6563cb
133906186-b44cb0d0-9ad2-40aa-9a5e-1d456a6563cb1170×2532 151 KB

3

You can use the inset property on ion-list: ion-list: Ionic Framework API Docs

1 Like
4

I did that and the bottom border of the list seemed to disapear. Where can I set the light and dark mode list background colours like the image above? (I would like the style to be applied globally)

5

I did that and the bottom border of the list seemed to disapear

This is by design. Notice in your screenshot that the inset list there does not have a bottom border on the last item either.

The Dark Mode Docs may come in handy here. ion-list does not have a dark mode setting because it takes on the color of the item. You can use --ion-item-background to customize the background color of the items in the list.

1 Like
6

Thank you! That worked. How can I change the inset border radius?

7

You can set border-radius on ion-list:

ion-list {
  border-radius: 8px;
}

(You may need to add a class to ion-list to increase the specificity)

Also, Ionic 6 will be updating the inset list border radius to better match the screenshot provided in this thread.

1 Like
8

Thank you so much! Additionally, when setting [inset] = "true" the lines style is similar to full, ie. the border length spans the whole width but I prefer the default lines style which is that the left side does not touch the edge. How do I reproduce that?