Cannot use border-radius CSS3 property with Flying Saucer

Question

I am working on a project where I need to convert an HTML to a PDF. I am using Flying Saucer 9.1.6 from Maven Central for this. The subjacent PDF generation library is IText 2.1.7.

Although Flying Saucer Git repo states that it supports CSS3 border-radius syntax I am unable to achieve rounded corners with border-radius.

Here is the sample code

ITextRenderer pdfRenderer = new ITextRenderer();
String resumeHTML = "<html>\n" +
            "<head>\n" +
            "  <title>JS Bin</title>\n" +
            "    <style>\n" +
            "  .circle{\n" +
            "    border-radius: 50%;\n" +
            "  }\n" +
            "</style>\n" +
            "</head>\n" +
            "<body>\n" +
            "  <img src='https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png'\n" +
            "       class='circle'\n" +
            "       >\n" +
            "  </img>\n" +
            "</body>\n" +
            "</html>";
    pdfRenderer.setDocumentFromString(resumeHTML);
    pdfRenderer.layout();
    FileOutputStream fos = new FileOutputStream("sample.pdf");
    pdfRenderer.createPDF(fos);
    fos.flush();
    fos.close();

Valid HTML snippet used in the above sample

<html>
<head>
  <title>JS Bin</title>
    <style>
  .circle{
    border-radius: 50%;
  }
</style>
</head>
<body>
  <img src='https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png'
       class='circle'
       >
  </img>
</body>
</html>

Can anybody suggest a way to achieve rounded corners when using Flying Saucer?

@MrLister Can you elaborate on what is wrong? Do you mean the missing doctype declaration and closing image tag? Flying Saucer looks for proper XHTML tag closing. That's the reason for the weird HTML. But it's valid for flying saucer. — Isuru Pathirana
Oh. In that case, sorry, apparently I don't know enough about Flying Saucer to be able to comment! — Mr Lister
@MrLister Thanks for trying to help me in the ways you could. — Isuru Pathirana
No, the flying saucer version is not outdated and still supported as any other open source software is (as good or bad the support is for open source software). And whether the iText Corp. endorses FlyingSaucer or not, is irrelevant. Maybe some other company doesn't endorse the use of iText? Who cares? StackOverflow is a platform to efficiently help people and that is what we should focus on here... — Lonzak

obourgain obourgain · Accepted Answer · 2017-08-25T07:07:29

border-radius works fine with divs, so you can use a div, and add your image with background-image:

<html>
<head>
<title>JS Bin</title>
<style>
  .circle {
    border-radius: 50%;
    width: 250px;height: 250px;
    background-image:url("https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png")
  }
</style>
</head>
<body>
  <div class='circle'></div>
</body>
</html>

Cannot use border-radius CSS3 property with Flying Saucer

1 Answers