JavaFX css border-radius issue

Question

I am trying to simulate the effect one would get from this css example:

border-radius: 50%;

From searching the API and reading posts on forums

Answer 1

This is not possible from CSS alone, since ImageView does not support any of Region's CSS properties.

However you can use a Ellipse as clip for the ImageView:

@Override
public void start(Stage primaryStage) throws MalformedURLException {
    Image img = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Space_Needle_2011-07-04.jpg/304px-Space_Needle_2011-07-04.jpg");
    ImageView iv = new ImageView(img);
    Ellipse ellipse = new Ellipse(img.getWidth() / 2, img.getHeight() / 2, img.getWidth() / 2, img.getHeight() / 2);
    iv.setClip(ellipse);

    Text text = new Text("Space Needle, Seattle, Washington, USA");
    StackPane.setAlignment(text, Pos.TOP_CENTER);

    StackPane root = new StackPane(text, iv);

    Scene scene = new Scene(root, img.getWidth(), img.getHeight());
    scene.setFill(Color.AQUAMARINE);

    primaryStage.setScene(scene);
    primaryStage.show();
}

I know it doesn't look good to let the image cover the text. This is only done for the purpose of demonstration.