How To Make Button Rounded Corners With CSS In JavaFX?

Overview

In this tutorial, we show you how to make button rounded corners with css in JavaFX.
Button Rounded Corners With CSS In JavaFX




Option 1 - Button Rounded Corners

If you are using JavaFX Scene Builder 2.0, go to the Style of the Label in the Properties section of the Inspector panel.
Add Styles:
-fx-background-color: #20B2AA;
-fx-background-radius: 15px;
-fx-text-fill: #ffffff;

Option 2 - Button Rounded Corners

Edit Example.fxml file. Add style="-fx-background-color: #20B2AA; -fx-background-radius: 15px; -fx-text-fill: #fff;" to tag Button.
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" fx:id="main" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.jackrutorial.ExampleController">
   <children>
      <Button layoutX="214.0" layoutY="160.0" mnemonicParsing="false" prefHeight="60.0" prefWidth="200.0" style="-fx-background-color: #20B2AA; -fx-background-radius: 15px; -fx-text-fill: #ffffff;" text="LOGIN" />
   </children>
</AnchorPane>

Option 3 - Button Rounded Corners

Using javafx.scene.control.Button.setStyle
btnLogin.setStyle("-fx-background-color: #20B2AA; -fx-background-radius: 15px; -fx-text-fill: #ffffff");

Full Source Code

Example.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" fx:id="main" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.jackrutorial.ExampleController">
   <children>
      <Button fx:id="btnLogin" layoutX="214.0" layoutY="160.0" mnemonicParsing="false" prefHeight="60.0" prefWidth="200.0" text="LOGIN" />
   </children>
</AnchorPane>

ExampleController.java
package com.jackrutorial;


import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class ExampleController implements Initializable {
    
    @FXML
    private Button btnLogin;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        btnLogin.setStyle("-fx-background-color: #20B2AA; -fx-background-radius: 15px; -fx-text-fill: #ffffff");
    }
}

Previous Post
Next Post

post written by: