CODEWITHSUNDEEP
javacssjavafx
AgentM
AgentM

Reputation: 406

The -fx-background-radius doesn't seem to work with four values properly

I am working with JavaFX and was messing about with the background-radius property, when I stumbled upon what seemed to be a bug. According to: https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html oracle's description There should be support for modifying one rounded corner independently of the rest. But when I write my css as follows:

.top-rounded-box {
    -fx-background-radius: 16, 16, 0, 0;
}

What I actually expected: what I expected

The actual result: not what I expected

(ignore the background size, quick crop in paint.exe)

So I was wondering if I was doing anything wrong, or if this is just a bug.

Upvotes: 2

Views: 950

Answers (2)

James_D
James_D

Reputation: 209603

From the documentation you posted, comma-separated values define the background radius for multiple backgrounds. So your CSS code sets the radius for the first background to 16px (on all four sides), the radius for the second background to 16px, and the radii for the third and fourth backgrounds to 0px. Since you only appear to have one background, you only see the results of the first value.

To set different radii for different corners, the values shouldbe whitespace-delimited, not comma-delimited:

.top-rounded-box {
    -fx-background-radius: 16 16 0 0;
}

You can have multiple backgrounds and different radii for different corners by comma-delimiting different sets of whitespace-delimited values, e.g. -fx-background-radius: 16 16 0 0, 16 16 8 8 ;, etc.

Upvotes: 2

AgentM
AgentM

Reputation: 406

This must have been one of my biggest css goofs :facepalm:

Simply remove the commas like so:

.top-rounded-box {
    -fx-background-radius: 16 16 0 0;
}

I missread the "separated by commas" section in the oracle documentation.

Upvotes: 0

Related Questions