How to get the Round Corners in JFXTextField or TextField using CSS in JavaFX

Question

I am building an application using JavaFX and I have a form with JFXTextFields and JFXComboBoxes. I need to round them like round corners as the following picture.

Like this:

I have tried the following CSS code:

.jfx-text-field {
    -fx-border-radius: 20px;
    -fx-background-radius: 20 20 20 20;
    -fx-border-color: #609;
}

But the result is this:

So how to round the text fields and combo boxes using CSS in JavaFX?

I can't compare between the two images you providing as the first one is not clear and please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — Ahmed Emad, Oct 13 '19 at 18:49

score 3 · Accepted Answer · answered Oct 14 '19 at 21:00

The .css-files used by JFoenix can be found at JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls. The .css-file belonging to JFXTextField is jfx-text-field.css and the .css-file belonging to JFXComboBox is jfx-combo-box.css.

The styles defined in these files have to be adapted in a user-defined .css-file according to the requirements, e.g.:

.jfx-text-field,
.jfx-combo-box {
    -fx-border-radius: 20px;
    -fx-border-color: #CCCCCC;
}

.jfx-text-field {
    -fx-padding: 0.333333em 1em 0.333333em 1em;
}

.jfx-combo-box {
    -fx-padding: 0em 1em 0em 1em;
}

.jfx-text-field > .input-line,
.jfx-combo-box > .input-line {
    -fx-background-color: transparent;
    -fx-pref-height: 0px;
    -fx-translate-y: 0px;
}

.jfx-text-field > .input-focused-line,
.jfx-combo-box > .input-focused-line {
    -fx-background-color: transparent;
    -fx-pref-height: 0px;
}

In the first block the border-radius and border-color are defined and in the following two blocks the padding. In the last two blocks the input line is disabled, which is still visible in the originally posted screenshot above. The result is:

The posted style is only an example and has to be adapted / optimized according to your requirements.

Thank you very much for this. This is what really I needed. – H Athukorala Oct 20 '19 at 07:45 — H Athukorala, Oct 20 '19 at 07:45

How to get the Round Corners in JFXTextField or TextField using CSS in JavaFX

1 Answers1