Setting border radius for Dash Bootstrap Components's CardGroup component or its parent Div doesn't work the same as for individual cards

Question

I'm building an app in Dash using the dbc module and all of my other components and UI elements have corners rounded for 20px. However, I use a CardGroup component to display some information as individual cards stitched together and it doesn't respond to CSS border-radius or Bootstrap's "rounded". A function returns the card group to a parent Div via a callback. I tried changing the parent Div style without success.

Only way to make this work is to set each card's border-radius manually, but since I'm using a for-loop to generate the cards, I can't assign different radius to first and last card respectively. Is there any way to style the CardGroup component to give rounded corners?

def generate_weather_card(weather_data):
    temp_feels_like = f'{round(weather_data["main"]["feels_like"] - 273.15, 1)} °C'
    temp_actual = f'{round(weather_data["main"]["temp"] - 273.15, 1)} °C'
    windspeed = f'{round(weather_data["wind"]["speed"]*3.6, 1)} km/h'

    if "gust" in weather_data["wind"].keys():
        windgust = f'{round(weather_data["wind"]["gust"]*3.6, 1)} km/h'
    else:
        windgust = "N/A"
    pressure = f'{weather_data["main"]["pressure"]} hPa'
    humidity = f'{weather_data["main"]["humidity"]} %'

    contents = {
        "Temperature": [(temp_feels_like, "Feels like"),
                        (temp_actual, "Actual")],
        "Wind": [(windspeed, "Wind speed"), (windgust, "Wind gusts")],
        "Atmosphere": [(pressure, "Pressure"), (humidity, "Humidity")]
    }
    card_style = {"width": "6cm", "height": "7cm", "text-align": "center"}

    cards = []

    for key in contents.keys():
        card = dbc.Card([
            dbc.CardHeader(key, className="fw-bold fs-3"),
            dbc.CardBody([
                html.H2(contents[key][0][0],
                        className="card-text fw-bolder text-secondary"),
                html.P(contents[key][0][1],
                       className="card-text fw-bold fs-5"),
                html.H2(contents[key][1][0],
                        className="card-text fw-bolder text-secondary"),
                html.P(contents[key][1][1], className="card-text fw-bold fs-5")
            ],
                         style={"font-size": "18px"})
        ],
                        class_name="align-self-center",
                        style=card_style)
        cards.append(card)

    return dbc.CardGroup(cards, style={"border-radius":"20px"})

^^ Last line doesn't round the corners. I also tried changing the "tag" property of CardGroup to "img", which didn't help at all.

dbc.Col([
                    html.Div("Select location to display weather data",
                             id="weather_main",
                             className="ms-4 me-4 mb-4 mt-2")
                ],
                        width={"size": 7})

^^ The column and parent Div where the CardGroup goes from this callback

@app.callback([
    Output("weather_main", "children"),
    Output("wicon", "children"),
    Output("situation", "children")
], [State("map", "center"),
    Input("location_name", "children")],
              prevent_initial_call=True)
def parse_weather_icon(lat_lon, lname):
    weather_data = get_weather(lat_lon)
    return [
        generate_weather_card(weather_data),
        html.Img(
            src=
            f'http://openweathermap.org/img/wn/{weather_data["weather"][0]["icon"]}@2x.png',
            style={"height": "2cm"}),
        weather_data["weather"][0]["description"].capitalize()
    ]

Any ideas on why it doesn't work? Thanks

App layout with above code: App layout