1 Reply Latest reply on Apr 29, 2013 11:18 AM by James_D

    Rectangle CSS

      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
        • 1. Re: Rectangle CSS
          The css property
          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 {
            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");
              Scene scene = new Scene(root, 400, 400);
            private Region createRectangle(double x, double y, double width, double height) {
              final Region rectangle = new Region();
              rectangle.setPrefSize(width, height);
              rectangle.setMinSize(width, height);
              rectangle.setMaxSize(width, height);
              return rectangle;
            public static void main(String[] args) {