How to create a partial border(with a hole)?

Question

I wrote code in JavaFX and used CSS for setting styles for the above issue. The following code made borders for an AnchorPane that are 2 pixels wide:

    AnchorP         


        

Answer 1

Sir, Do you strictly require CSS for this? java can do it, using Shape and Borders

Nikitoslav.java

public class Nikitoslav extends Application {

@Override
public void start(Stage primaryStage) throws Exception {

    Pane g = new Pane();        
    g.setBackground(new Background(new BackgroundFill(Color.YELLOW,
            null, null)));
    g.relocate(20, 20);
    BorderStroke bs = new BorderStroke(Color.RED, Color.RED, Color.RED, Color.RED,//the paint around th four corners
            BorderStrokeStyle.SOLID, BorderStrokeStyle.SOLID, BorderStrokeStyle.SOLID, BorderStrokeStyle.SOLID,
            null, BorderStroke.THIN, null);
    g.setBorder(new Border(bs));
    Path p = new  Path();
    p.getElements().addAll(new MoveTo(1, 0),new HLineTo(0),new VLineTo(4), new HLineTo(4), new VLineTo(0),
            //creating a rectangle
            new HLineTo(3)
    );
    g.setShape(p);
    g.setPrefSize(300, 300);
    primaryStage.setScene(new Scene(new Group(g),500,500));
    primaryStage.show();
    g.setPrefSize(400, 400);
}


public static void main(String[] args) {
    launch(args);
}

@Override
public void init() throws Exception {
    // TODO Auto-generated method stub
    super.init();
}

@Override
public void stop() throws Exception {
    // TODO Auto-generated method stub
    super.stop();
 }

}

With this you don't need nested Backgrounds or an array of Backgrounds-(guess that will improve performance)

To explain my code, well, i created my Borders using the BorderStroke which Paint fills for top-right-bottom-left respectively, specified the type of Color and style, after i created an open rectangle with the PathElements. From the x axis i started from 1 then to 0 the drew a vertical line to 4, the length of the rectangle and drew the bottom width also 4and drew from a vertical line from length 4 to 0 then drew from width 4 to 3 and left points 2 being the hole

Hope it helps

Answer 2

Use "nested backgrounds" to generate borders like this:

    pane.setStyle("-fx-background-color: blue, -fx-background, -fx-background;"
            + "-fx-background-insets: 0 0 0 0, 0 50 2 100, 2 2 2 2;");

The JavaFX CSS documentation has all the details, but basically the way this works is that it creates three backgrounds, which are laid one over the other. The first is blue, with insets of 0 on every side. I.e.:

pane.setStyle("-fx-background-color: blue; -fx-background-insets 0 0 0 0;");

This creates a blue rectangle which fills the entire pane:

The second background has the default root background from modena (-fx-background). It has insets of 0 at the top, 50 to the left, 2 at the bottom, and 100 at the right. So the first two nested backgrounds:

pane.setStyle("-fx-background-color: blue, -fx-background;"
        + "-fx-background-insets: 0 0 0 0, 0 50 2 100;");

produce this:

Note the 2-pixel wide blue line at the bottom.

Finally, the third background also has the default background color (-fx-background), and insets of two pixels on each side. So when this is laid over the previous two backgrounds, the desired effect is seen:

When the values for all four sides are the same, you can replace the four values with a single value. So the CSS can be abbreviated

    pane.setStyle("-fx-background-color: blue, -fx-background, -fx-background;"
            + "-fx-background-insets: 0 , 0 50 2 100, 2;");

Just a technical note: the default style sheet is not loaded unless at least one control is created, which is why I add a Label in the complete example below.

Here is an SSCCE:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class BorderWithGap extends Application {

    @Override
    public void start(Stage primaryStage) {
        AnchorPane pane = new AnchorPane();

        Label label = new Label("Border with gap");
        AnchorPane.setTopAnchor(label, 50.0);
        AnchorPane.setLeftAnchor(label, 50.0);
        pane.getChildren().add(label);

        pane.setStyle("-fx-background-color: blue, -fx-background, -fx-background;"
                + "-fx-background-insets: 0, 0 50 2 100, 2;");


        Scene scene = new Scene(pane, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 3

how about use :before ?

.testbox is a block element that you want to add the border.

.testbox{
    margin:10px;
    border:#000 solid 2px;
}

.testbox:before {
    background: #fff;
    width:300px;
    height: 2px;
    content: '';
    position: relative;
    display: block;
    top: 0;
    left: 300px;
    margin: -2px 0 0;
}