Having trouble applying a border and border radius on a dbc.Table

I am attempting to:

  1. create a border around the outside of the table
  2. make the border have a radius

When I apply styling by stating either all 4 border sides individually (like below), the lines between each row also become solid orange. If I comment 1 side out, the lines between rows are not impacted. I don’t want them changed.

Also, I am able to make the corners have a radius, but I cannot figure out how to make the border follow this radius. In my example, the border I add has square corners, but you can still faintly see the table has a radius.

Any help is appreciated!

import dash_bootstrap_components as dbc
from dash import html
import dash

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

columns = ["1", "2"]
rows = [["Aa", "B"], ["C", "D"]]
headers = [html.Thead(html.Tr([html.Th(header) for header in columns]))]
all_rows = []
for i, row in enumerate(rows):
    individual_row = [html.Td(data) for data in row]

table2 = dbc.Table(
        'width': '30%',
        'border-right': '1px solid orange',
        'border-left': '1px solid orange',
        'border-top': '1px solid orange',
        #'border-bottom': '1px solid orange',
        'border-radius': '20px',
        'margin': 'auto'

app.layout = html.Div([table2], style={'backgroundColor':'#F8F8F8'})

if __name__ == "__main__":


Please more consider using class_name instead of CSS when you are using dbc.


html.Span(className="border border-5")
html.Span(className="border rounded")
1 Like