CODEWITHSUNDEEP
javacssjavafx
Jordan North
Jordan North

Reputation: 17

JavaFX: background overflow on button's border

I have a button with custom CSS. The white background is overflowing and is seen past the black border (as shown in the picture).

I'm not sure how to fix this issue as I have experience only with web version of CSS.

Thanks for any help!

.root {
 -fx-font-family: verdana;
 -fx-background-color: rgb(16, 118, 252);

}

#head {
  -fx-font-size: 30;
  -fx-fill: black;
  -fx-font-weight: bold;
}

.button {
  -fx-background-radius: 50;
  -fx-border-radius: 25px;
  -fx-text-fill: black;
  -fx-background-color: white;
  -fx-font-size: 25;
  -fx-border-style: solid;
  -fx-border-color: black;
  -fx-border-width: 5px;
}

#footer {
  -fx-font-size: 18;
}

Upvotes: 1

Views: 1269

Answers (1)

Sergey Grinev
Sergey Grinev

Reputation: 34498

It seems there are some rounding errors for ...-radius styles. You can hide background under the border by using insets:

  -fx-background-insets: 5px;

Upvotes: 1

Related Questions