Search code examples
javacssitextpdf-generationflying-saucer

Cannot use border-radius CSS3 property with Flying Saucer

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?

Solution

  • 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>