CSS Border Images

The border-image property allows you to specify an image to be used as the border around an element, instead of the standard solid, dashed, or dotted border styles.

How it Works

The property takes an image and "slices" it into 9 sections (four corners, four edges, and a middle). You then specify how those slices are used to fill the layout.

1. Stretched Border

.box {
    border: 15px solid transparent; /* Required fallback */
    border-image: url('border.png') 30 stretch;
}

2. Rounded/Repeated Border

.box {
    border: 15px solid transparent;
    border-image: url('border.png') 30 round;
}

Border Image Properties

• border-image-source: The path to the image to be used.
• border-image-slice: How many pixels to "slice" from each side of the image.
• border-image-width: The width of the border image.
• border-image-repeat: Whether the image should be stretched, repeated, or rounded.