How can I create borders around containers?

Using Streamlit
1

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])
1 Like
2

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.

3

Too much trouble! Hope Streamlit builds this in someday.

1 Like
4

@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.

5

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.

image
image1050×594 66.6 KB

1 Like
6

I just wanted to keep this open and add +1 since this is something I’m looking for too

Basically, it’d be nice to be able to put a border/box around a set of info on a page to make it look nicer

In my case this is similar to using PPT and either a) inserting a text box and giving it borders or b) putting a square with no fill around a set of info

7

+1, hopefully this is something streamlit supports in one of their upcoming releases.

Similar to what others have described. Equivalent to a textbox with borders in PPT.

8

+1 I hope it becomes an update

9

I’d like to see this as well, st.form puts a border around its contents, ideally st.container would have the same behaviour.

10

st.container and st.form now have a border parameter to show or hide a border as of version 1.29.0.

1 Like
11

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.