How to put a Plotly graph inside a box shape?

I’m creating a dashboard for my personal project. Here’s what it looks like (it’s not completed yet tho):

What I want is to also “put” my Plotly graph inside a box shape just like the average rating, total reviews, and total downloads. So perhaps it’ll look something like this:

Is there any way to achieve that? I’ve looked for a solution but couldn’t find any. Hope someone can help me. Thank you!

Btw, this is the code that I used for creating the box shape for the average rating, total reviews, and total downloads:

with col1:
    st.markdown("<h4>Average Rating</h4>", unsafe_allow_html=True)
    wch_colour_box = (245, 168, 184)
    # wch_colour_box = (255, 255, 255)
    wch_colour_font = (0, 0, 0)
    fontsize = 50
    valign = "left"
    iconname = "fas fa-star"
    i = round(df["score"].mean(), 2)

    htmlstr = f"""
        <p style='background-color: rgb(
            {wch_colour_box[2]}, 0.75
        color: rgb(
            {wch_colour_font[2]}, 0.75
        font-size: {fontsize}px;    
        border-radius: 7px; 
        padding-top: 40px; 
        padding-bottom: 40px; 
        display: flex;
        align-items: center;
        justify-content: center;'>
        <i class='{iconname}' style='font-size: 40px; color: #ed203f;'></i>&nbsp;{i}</p>

    st.markdown(lnk + htmlstr, unsafe_allow_html=True)

Hi @Mathew_Darren_Kusuma, welcome to the forum! :wave: :smile:

Take a look at Plotly’s documentation, specifically the paper_bgcolor parameter:

  • paper_bgcolor – Sets the background color of the paper where the graph is drawn.
    The ‘plot_bgcolor’ property is a color and may be specified as:
    - A hex string (e.g. ‘#ff0000’)
    - An rgb/rgba string (e.g. ‘rgb(255,0,0)’)
    - An hsl/hsla string (e.g. ‘hsl(0,100%,50%)’)
    - An hsv/hsva string (e.g. ‘hsv(0,100%,100%)’)
    - A named CSS color:
    aliceblue, antiquewhite, aqua, aquamarine, azure,
    beige, bisque, black, …
import streamlit as st

df ="continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color="country")

# Create a border around the plot and set paper_bgcolor to light red

st.plotly_chart(fig, use_container_width=True)

But I want it to have rounded corners and a slight shadow, just like this:

Can I achieve this using Streamlit? I really need it. Also, here’s the link to my dashboard in case it may be helpful. Thanks!

I’d defer to others in the community and/or the Plotly documentation. You probably need to use a CSS hack or submit a feature request in the Plotly Python repo, but I don’t the know specifics.