1 Reply Latest reply: Apr 29, 2013 6:18 AM by James_D RSS

    Rectangle CSS

    895675
      how I use the radius in a rectangle in the css to make the curve on one side only, by example: top-left. I did it this way, but it did not work
      -fx-background-radius or
      -fx-background-fills
      Thanks!
        • 1. Re: Rectangle CSS
          James_D
          The css property
          -fx-background-radius
          only applies to Region (and subclasses), not to Rectangles.

          Rectangle has -fx-arc-width and -fx-arc-height, but these only take a single value, not a series of values for each corner.

          So to do something like this, you have to use a Region to create your rectangle.

          The following works for me, but feels like a bit of a hack:
          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.layout.Pane;
          import javafx.scene.layout.Region;
          import javafx.stage.Stage;
          
          public class RectangleTest extends Application {
          
            @Override
            public void start(Stage primaryStage) {
              Pane root = new Pane();
              final Region rectangle = createRectangle(50, 50, 300, 200);
              rectangle.setStyle("-fx-background-color: green; -fx-background-radius: 15 0 0 0");
              root.getChildren().addAll(rectangle);
              Scene scene = new Scene(root, 400, 400);
              primaryStage.setScene(scene);
              primaryStage.show();
            }
          
            private Region createRectangle(double x, double y, double width, double height) {
              final Region rectangle = new Region();
              rectangle.setLayoutX(x);
              rectangle.setLayoutY(y);
              rectangle.setPrefSize(width, height);
              rectangle.setMinSize(width, height);
              rectangle.setMaxSize(width, height);
              return rectangle;
            }
          
            public static void main(String[] args) {
              launch(args);
            }
          }