How to round the borders of a card in a Dash app - plotly-dash

Question

I have the following code which gives me a scatter plot on a dbc.Card element within Dash. I'm trying to figure out what I need to do in order to make the corners of the card rounded.
Here's the code I have currently:
import dash
from dash import dcc
from dash import html
from dash import Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd
# import the Caffeine dataset
caffeine = pd.read_csv('caffeine.csv')
# create scatter plot
scatter = px.scatter(caffeine,
x='Volume (ml)',
y='Caffeine (mg)',
color='type',
title='Volume x Caffeine',
height = 800,
hover_data=['drink'],
template='plotly_dark'
)
# layout of Dash app
pp.layout = dbc.Container([
dbc.Row(
dbc.Col(html.H1("Analysis of Caffeinated Drinks",
className='text-center mb-4',),
width=12
)
),
dbc.Row(
dbc.Col(
dbc.Card(
dbc.CardBody(
dcc.Graph(
figure=scatter
)
)
),
width={'size':10, 'offset':1}
)
)
I've tried using the answer on this stackoverflow question (How to round the corners of a card (body and image) in Bootstrap 4?) and as such I tried inserting a style={border-radius: '20px'} in a couple of different places but haven't had any luck producing a change.
Is there another method I could/should use, or else could someone please show me exactly what to do? I'm pretty new to Dash as well as html and css.
Many, many thanks in advance!

Answer 1

If you set the style in a CSS file, you need to use border-radius: 20px;, but if you set the style directly on the dbc.Card component, you have to set borderRadius=20.

Answer 2

I would suggest you add in your style.css a class called something like card-style and there, you will add all the CSS stuff
So, in your code, you will add the class in the className of the dbc.Card
app.layout = dbc.Container([
dbc.Row(
dbc.Col(html.H1("Analysis of Caffeinated Drinks",
className='text-center mb-4',),
width=12
)
),
dbc.Row(
[(dbc.Col(
dbc.Card(
dbc.CardBody(
html.Div(f"card {n}")
),
className="card-style"
),
width={'size':3, 'offset':1}
)) for n in range(8)]
)])
And in your assets/style.css you will add something like:
.card-style {
border: solid black 1px;
border-radius: 8px;
height: 120px;
}
It will help you to not repeat yourself by simply creating this kind of class for your elements.
You can check and test the HTML elements by pressing F12 and selecting what you're interested in;
The output of the code above is the above