Child pane css style when parent pane has -fx-border-radius in JavaFX

I have two panes - parent pane and child pane. Child pane is inside parent pane. Parent pane has the following css rules:

-fx-border-color:derive(-fx-background, -35%); -fx-border-width:1; -fx-border-style:solid; -fx-border-radius:4; 

Child pane has the following css rules:

-fx-background-radius:25; 

And this is one of the corner:

As you see the corner is a little pale - I mean parent border is not well seen in the very corner (left bottom corner). To solve this problem I added to child -fx-background-radius:25 however it didn't help. How to fix it, taking into consideration I can't add padding to parent or margin to child?

3 Answers

Answers 1

try adding: -fx-background-radius:4; to your parent panel (same radius as border)

Answers 2

I created the sample fxml considering your problem statement.

I haven't done anything special but it worked as expected

Please refer below fxml file for same.

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">    <children>       <Pane layoutX="129.0" layoutY="72.0" prefHeight="300.0" prefWidth="300.0" style="-fx-border-width: 1; -fx-border-style: solid; -fx-border-radius: 4; -fx-background-color: derive(-fx-background, -35%); -fx-background-radius: 4;">          <children>             <Pane layoutX="1.0" layoutY="213.0" prefHeight="86.0" prefWidth="298.0" style="-fx-background-radius: 4; -fx-background-color: white;" />          </children>       </Pane>    </children> </AnchorPane> 

Output :

Answers 3

To add padding here's the ref.

-fx-padding: 0 0 0 5; 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati