Round corners on list items

I'm using a simple list on this draft website: https://harmonica-pumpkin-n8yx.squarespace.com/ (password: signs)

I would like to round the list item corners by 10px. I found a CSS for it (below), but it doesn't seem to work - not sure if the code is outdated or something else is wrong? Any advise would be much appreciated! 

Here is the code I've tried:

.list-item {

border-radius: 10px;

}

@Lesum thank you so much, this worked! Would you also happen to know how I may be able to adjust the header image's height and positioning on mobile, without affecting desktop?

@tiinamaria Did you mean the header logo? You can modify mobile logo size under Edit > Site Title & Logo (Click on the logo) > Mobile Logo Max Height

@Lesum apologies I meant the homepage banner! I'd like to limit its height on mobile, and also change the positioning so that more of the key elements display.

@tiinamaria You can reduce the homepage banner text size and adjust banner height on mobile with this code:

@media screen and (max-width: 767px) {
    .fe-block-c2257cac2aa170bb6fdf h2 {
        font-size: 25px !important;
    }
}