Dash doesn't draw radius with radius_border property

Dash Python
1

I noticed an odd bug when dash renders the border around a div. If the html style property is set for a div to border-radius to lets say 10, it draws the outside lines but not the radius. The lines end where the radius would start. The radius draws properly if there is no graph in the container, but if there is a graph the radius line is missing.

border

style={‘border’:‘1px solid’, ‘border-radius’: 10}

app.layout = html.Div(
    [
        html.Div(
            [
                html.H1(
                    MyTitle,
                    className='six columns',
                ),
            ],
            className='row',
            style={'border':'1px solid', 'border-radius': 10}
           # border radius draws properly here
        ),

        html.Div(
            [
                html.Div(
                    [
                        #html.H5(A1),
                        dcc.Graph(id='dv',style={'height': aheight})
                    ],
                    style={'border':'1px solid', 'border-radius': 10}
                   # border radius is missing!
                ),
2

Have you tried adding the border radius to the style of the dcc.Graph itself?

3

@chriddyp Thanks for the quick reply. Thanks for the tip. I tried playing around with the ‘border-radius’ property on the graph but still have the same issue. I was not aware that the graphs had this property - I couldn’t see it in the documentation.
It could very well be that the corners of the graph are covering the radius. I played around with different options but couldn’t seem to fix the issue.

4

Hi @dbill, not sure if you have found a better solution, but a easy fix would be just specifying the margin of the plot so it would be within the border. e.g.

html.Div(dcc.Graph(id = 'plotaspects',
                   style={'margin':5}
                   ), 
        style={'border':'1px solid', 'border-radius': 10, 'backgroundColor':'#FFFFFF'})
        #'backgroundColor' should be the same as plot background color
5

Hi, @dbill! I assume this issue is not actual anymore, but perhaps someone will need it. You can set the border-radius directly in the css asset (see how to add css to your app here add css). For setting border radius of your graph add #'your graph id' .main-svg {border-radius: 20px} to your css.
Hope this helps