Search code examples
cssxhtml2pdf

Creating a rounded image with limited standard CSS properties?


Would it be possible to create a rounded image using a limited set of CSS properties? I am using python's xhtml2pdf and it only supports a few CSS properties.

The only CSS properties available are:

background-color
border-bottom-color, border-bottom-style, border-bottom-width
border-left-color, border-left-style, border-left-width
border-right-color, border-right-style, border-right-width
border-top-color, border-top-style, border-top-width
colordisplay
font-family, font-size, font-style, font-weight
height
line-height, list-style-type
margin-bottom, margin-left, margin-right, margin-top
padding-bottom, padding-left, padding-right, padding-top
page-break-after, page-break-before
size
text-align, text-decoration, text-indent
vertical-align
white-space
width
zoom

Solution

  • Sadly this is not possible with this limited set of CSS properties.

    But you can use another library to modify an existing image and create a version of the image with a round border (and add some filters to it, do whatever you want basically)

    Edit: Since PIL was mentioned in a comment: PIL round edges and add border (something like this, see also linked questions/answers)

    Then you just use this image in the pdf, no one will notice any difference.