having more than one st.html with style change does not reflect right

Using Streamlit
,
1

Hello there

I wanted to have a st.divider with different colours and apparently there is no colour parameter for this function. So, I ended up using st.html with style like below

st.html(
    '''
    <style>
    hr {
        border-color: red;
    }
    </style>

    <hr />
    '''
)

This works fine and I get a red line.

However, I would like to have one more line at the end of my page in blue. So I used the same tag but with different style like below

st.html(
    '''
    <style>
    hr {
        border-color: blue;
    }
    </style>

    <hr />
    '''
)

The moment I add this, both the <hr /> becomes blue in the screen. Why does this happen and how do we fix this?

2

Hi @Gosu

Why don’t you do something like this…

hr_line_1 = "<hr style='margin-top: 10px; margin-bottom: 10px; border: 1px solid; color: red; '>"
hr_line_2 = "<hr style='margin-top: 10px; margin-bottom: 10px; border: 4px dashed; color: blue; '>"

st.html(hr_line_1)
st.html(hr_line_2)

Cheers