Border around the outside of the container and shadow

Using Streamlit
1

hey Guys,

I have been struggling trying to :

  • create a border around the outside of the container
  • make the border have a radius

I am using plotly for my plots. I am open to another library.

The first pic is what I have as for now.

image1
image1910×202 2.9 KB

The second pic is what I would like to achieve.

image1
image1871×207 55 KB

Please don’t focus on the content of these boxes. Only their form and the content.

Here is the piece of code I am using.

import streamlit as st
import plotly.graph_objects as go

def define_title(title, x_pos, y_pos):
title_format = {
‘text’: f"{title}",
‘x’: x_pos,
‘y’: y_pos,
‘xanchor’: ‘center’,
‘yanchor’: ‘top’
}
return title_format

fig = go.Figure()

fig.add_trace(go.Indicator(
mode=“number”,
value=125,
number={‘font’: {‘size’: 50, ‘color’: “#006400”, ‘family’: “Gill San”}}
))

title = ‘Players in Top 5 leagues’
fig.update_layout(
title=define_title(title, 0.5, 0.8),
legend=dict(orientation=“h”),
font=dict(size=10),
showlegend=False,
autosize=False,
height=130,
margin=dict(l=10, r=10, b=10, t=40, pad=4),
paper_bgcolor=“#191919”, # dark grey
plot_bgcolor=“#006400”

)

st.plotly_chart(fig, use_container_width=True, config=dict({‘staticPlot’: True}))

Libraries used:

  • streamlit version is 1.30
  • Python version is 3.10

The app is runned locally

PS : container(border = True) is not giving me what I would like to have :slight_smile:

2

Where is the first pic and second pic?

Can you format your code properly.

Is that you minimal reproducible code?

3

Hello, I modified my topic ! :slight_smile:

4

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