2

I need to have rounded corners on TextArea, but it looks a bit weird. Seems, some inner layer should also have rounded corners with the same radius, but which one?

I use this CSS:

.text-area {
    -fx-background-color: #dbb1b1, #fff0f0;
    -fx-background-radius: 15;
    -fx-border-radius: 15;
    -fx-border-color: red;
}

And it looks like this one: TextArea corners

Vadym
  • 71
  • 1
  • 6

2 Answers2

4

Seems I was needed to post this question in order to find solution by myself :D

.text-area .scroll-pane {
    -fx-background-color: transparent;
}
.text-area .scroll-pane .viewport{
    -fx-background-color: transparent;
}
.text-area .scroll-pane .content{
    -fx-background-color: transparent;
}
Vadym
  • 71
  • 1
  • 6
0

You can follow this.Hope this should help.

.text-area {
  -fx-border-radius: 10 10 0 0;
  -fx-background-radius: 10 10 0 0;

  /* top-left, top-right, bottom-right, and bottom-left corners, in that 
  order. */
 }
Mushfiqur Mashuk
  • 11
  • 5