Create rectangle with rounded corners around multiple containers

[elbert]

We would like to create a rounded rectangle around multiple streamlit containers to (visually) indicate that they are related.

When using streamlit columns, we can achieve this by modifying the styling for the stHorizontalBlock:

st.markdown("""
    <style type="text/css">
    div[data-testid="stHorizontalBlock"] {
        border:10px;
        padding:30px;
        border-radius: 10px;
        background:#FFFFFF;
    }
    </style>
""", unsafe_allow_html=True)

However, this does not allow for grouping of a combination of single and multi column blocks, like:

st.title("Hello World") # we would like to include this in the rounded rectangle
columns = st.columns(2) # the custom css will only be applied to this block
st.dataframe(df) # we would like to include this in the rounded rectangle

We would like to create one rounded rectangle that includes both the title and the next columns

Is there a way to achieve this?

[keiranmraine]

I know this isn’t exactly what you are looking for, but to group things I’ve simply used `st.markdown(‘----’) to insert a horizontal rule around the section of related items:

import streamlit as st

st.title('Grouping Example')

st.write('preamble')

st.markdown('----')
st.subheader("Related data")
(col1, col2) = st.columns(2)
val = None
with col1:
    st.write("stuff in 1")
with col2:
    val = st.slider('slider in col 2', 1, 50)
st.markdown(f'<div style="text-align: center">Very long winded way of saying value is: {val}</div>', unsafe_allow_html=True)
st.markdown('----')

st.write('post')