title: JavaFX css border-radius issue
body: <p>I am trying to simulate the effect one would get from this css example:</p>
  
  <pre><code>border-radius: 50%;
  </code></pre>
  
  <p>From searching the API and reading posts on forums including this one, I found that I should be using <code>-fx-background-radius</code>. This however is not giving me the wanted effect.</p>
  
  <p>I setup a picture as the background using <code>-fx-background-image:url(...)</code> and then I want to make it into a circle.</p>
  
  <p>How can I achieve this?</p>
  
  <h1>Update</h1>
  
  <p>So I see that I was not being too specific so let me try to elaborate:</p>
  
  <p>I created a <code>Pane</code> object, that does extend the <code>Region</code> class from JavaFX.</p>
  
  <p><strong>main.fxml:</strong></p>
  
  <pre><code>...
  &lt;Pane styleClass="wrapper"&gt;
      &lt;Pane layoutX="34.0" layoutY="28.0" styleClass="image" /&gt;
  &lt;/Pane&gt;
  </code></pre>
  
  <p>For this pane I created the styleclass <code>image</code> as seen above. </p>
  
  <p><strong>main.css:</strong></p>
  
  <pre><code>.list-contact .image {
    -fx-alignment:left;
    -fx-pref-height:40px;
    -fx-pref-width:40px;
    -fx-background-radius:50%;
    -fx-background-image:url(...);
    -fx-background-repeat:no-repeat;
  }
  </code></pre>
  
  <p><strong>The effect I get:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/f1rke.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f1rke.jpg" alt="The effect I get:"></a></p>
  
  <p><strong>The effect I want:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/YRHlj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YRHlj.jpg" alt="The effect I want"></a></p>
  
  <p>I hope this explains it better.</p>