Set border size

Question

I want to make the border of a borderpane more round and bold.

I tested this code:

bpi.setStyle("-fx-background-color: linear-gradient(to bottom, #f2f2f2, #d4d4d4);"
                + " -fx-border: 12px solid; -fx-border-color: white; -fx-background-radius: 15.0;"
                + " -fx-border-radius: 15.0");

I get this result:

How I can fix this?

Answer 1

Why your current approach doesn't work

Don't use -fx-border (it doesn't even currently exist in JavaFX CSS).

Though there are other fx-border-* attributes such as -fx-border-color, -fx-border-width and -fx-border-radius, I wouldn't recommend them either.

Suggested Approach

Instead, use a combination of layered attributes:

• -fx-background-color
• -fx-background-insets
• -fx-background-radius

You can find documentation on these CSS attribute features in the JavaFX CSS reference guide.

Although using -fx-background-* attributes for a border seems strange:

1. It is the way that all of the borders in the default JavaFX modena.css stylesheet are handled.
2. In my experience, when borders are rounded, applying borders in this way is simpler and gives better results than using -fx-border-* attributes.

Sample Code

For instance, here is an example fxml file which applies the standard modena.css style attribute values for "button like things" to a BorderPane. (modena.css comes from Java 8).

You can copy and paste the fxml and css, then load them up in SceneBuilder to see what it looks like.

button-like.css

.button-like {
  -fx-background-color: 
       -fx-shadow-highlight-color, 
       -fx-outer-border, 
       -fx-inner-border, 
       -fx-body-color;
  -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  -fx-background-radius: 3px, 3px, 2px, 1px;
}

button-like.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?scenebuilder-stylesheet button-like.css?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity"
            minHeight="-Infinity" minWidth="-Infinity" prefHeight="131.0"
            prefWidth="196.0" xmlns:fx="http://javafx.com/fxml/1"
            xmlns="http://javafx.com/javafx/2.2">
  <children>
    <BorderPane layoutX="48.0" layoutY="26.0" prefHeight="79.0" prefWidth="100.0"
                styleClass="button-like" 
    />
  </children>
</AnchorPane>

Note

You wouldn't actually want to apply the above exact style in your application for styling something like a BorderPane, as that is not a "button like thing". Using the same styling for something that is not a button would confuse the user. But the sample approach should demonstrate the general idea on layering backgrounds to achieve the style you want.

Additional Example

This example uses the same FXML layout file defined above, just a different stylesheet to achieve a different style.

AnchorPane {
  -fx-background-color: #232732;
}

.button-like {
  -fx-outer-border: white;
  -fx-body-color: linear-gradient(to bottom, #FAFAFA, #EAEAEA);
  -fx-background-color: 
       -fx-outer-border, 
       -fx-body-color;
  -fx-background-insets: 0, 6;
  -fx-background-radius: 6px, 0px;
  -fx-background-image: url('http://icons.iconarchive.com/icons/appicns/simplified-app/64/appicns-Chrome-icon.png');
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

/**
Icon license: Free for non-commercial use.
Icon license Commercial usage: Not allowed
Icon source: http://appicns.com
*/