border-radius css not working with flying saucer

Question

I want to use border-radius for my document, I was struggling and I found this code on stack overflow from here but results in this: output.pdf, why?

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

Eugen Eugen · Accepted Answer · 2018-12-15T07:12:49

This is because you use different structure. Try this:

.circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    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")
  }

border-radius css not working with flying saucer

2 Answers