Png_pane styles

Panel
1

Dear All

I try to make rounded image however I couldn’t get it works, my code
import panel as pn
custom_style = {
‘background’: ‘#f9f9f9’,
‘border’: ‘1px solid black’,
‘border-radius’: ‘50%’,
‘padding’: ‘10px’,
‘box-shadow’: ‘5px 5px 5px #bcbcbc’
}
png_pane = pn.pane.PNG(‘https://assets.holoviz.org/panel/samples/png_sample2.png’,
styles=custom_style)

png_pane

output:

image
image1400×713 244 KB

thanks

2

Assuming you are in panel 1.0 or newer, you need to target the inside of the shadow dom using the stylesheets argument, not the external container of the shadow dom, which is what styles does. I recommend checking out the docs for details and reading up on shadow dom, as it can be confusing!

import panel as pn
pn.extension()
stylesheets= ['''
img {
border-radius: 50% 
}
''']
png_pane = pn.pane.PNG('https://assets.holoviz.org/panel/samples/png_sample2.png',
stylesheets=stylesheets)
3

Awesome. Thanks @rsdenijs . it works.

I use panel 1.2.0

thanks