This discussion is archived
1 Reply Latest reply: Apr 29, 2013 4:18 AM by James_D RSS

Rectangle CSS

895675 Newbie
Currently Being Moderated
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 Guru
    Currently Being Moderated
    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);
      }
    }

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points