How can I create borders around containers?

How can I make colored borders of specified thickness appear around containers? E.g.

secondrow1, secondrow2, secondrow3, secondrow4 = st.columns([3,2,4,4])
secondrow1title = "**" + 'Public domain books in progress:** (' + str(len(public_domain_files)) + ')'
secondrow1.markdown(secondrow1title)
with secondrow1.container(): # I want a border around this container
    with st.form(key="PublicDomainBooks"):
        selected_file = secondrow1.selectbox("Select a file to work on:", public_domain_files)
        submitted = st.form_submit_button("Work on this file")
        if submitted:
            run_this_file = os.path.join(public_domain_path, selected_file)
            subprocess.call(['open',run_this_file])

with secondrow2.container():  # I want a border around this container
    with st.form("Contracted Titles In Progress"):
        st.markdown("**Royaltied Titles With Duty to Publish:**")
        contracted_files = get_filenames(contracted_path)
        selected_file = st.selectbox("Select a file to work on:", contracted_files)
        submitted = st.form_submit_button("Work on this file")
        if submitted:
            run_this_file = os.path.join(public_domain_path, selected_file)
            subprocess.call(['open',run_this_file])

It’s not trivial.

If you go into dev tools in the browser you can identify the CSS class and then use st.markdown() to inject it into the dashboard.

The issue comes from the fact that a lot of the time the css selectors are not specific enough and so its hard to apply styling to one individual element.

`# css injection
def _max_width_():
    max_width_str = "max-width: 1900px;"
    st.markdown(
        f"""
    <style>
    .block-container {{
        {max_width_str}
        }}
    .custom-widget {{
        display: grid;
        border: 1px solid black;
        padding: 12px;
        border-radius: 5%;
        color: #003366;
        margin-bottom: 5px;
        min-height: 251.56px;
        align-items: center;
    }}
    h6 {{
        display: block;
        font-size: 18px;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
        color: #003366;
    }}
    h2 {{
        text-decoration: underline;
    }}
    h1 {{
        display: grid;
        justify-content: center;
        align-items: center;
    }}

    .css-1m8p54g{{
        justify-content: center;
    }}
    .css-1bt9eao {{
    }}
    .row-widget.stCheckbox {{
        display: grid;
        justify-content: center;
        align-items: center;
        border: solid 2px black;
        border-radius: 3%;
        height: 50px;
        background-color: #DF1B88;
        color: #FFFFFF;
    }}
    .css-1djdyxw {{
        color: #FFFFFF;
    }}
    .css-ps6290 {{
        color: black;
    }}
    .css-1cpxqw2 {{
        background-color: #00AB55;
        color: white;
        font-weight: 500;
        border: 1px solid #003366;
    }}
    <style>
    """,
        unsafe_allow_html=True,
    )


_max_width_()`

Here is an example of some css being used in streamlit.

Too much trouble! Hope Streamlit builds this in someday.

1 Like

@fredzannarbor Can you show me a screenshot or sketch of what you’d ideally want? Then I can add this to our feature requests, so we can see if and how we can best support this.

Hi! I think the idea is the one on the following link:

Now, I´m using st.expander (opened by default) that could mimic a card, with borders and you can include an element like a chart or image, …

The idea is to have the same functionality as the one created as a custom component but without the problems involved in creating a new custom component like using react, js, etc. and organize the cards as containers.