border-image

Definition

The border-image property in CSS is a shorthand property that allows you to specify the properties border-image-source, border-image-slice, border-image-repeat, and border-image-width in a single declaration.

Examples

Use a border image that is 10px wide, sliced into 30px-wide pieces, stretched to fill the border area, and repeated to fill the remaining space:

border-image: url('my-border-image.png') 30 stretch 10px / 50% repeat;

Use a border image that is 50% of the element's width, sliced into 30px-wide pieces, and stretched to fill the border area:

border-image: url('my-border-image.png') 30 stretch 50% / 50% stretch;

Use a border image that is 50% of the element's width, sliced into 30px-wide pieces, and repeated to fill the remaining space:

border-image: url('my-border-image.png') 30 repeat 50% / 50% repeat;

Use a border image that is 10px wide on the top and bottom, and 20px wide on the left and right, sliced into 30px-wide pieces, and repeated to fill the remaining space:

border-image: url('my-border-image.png') 30 repeat 10px 20px / 50% repeat;

Use a border image that is 10px wide on the top, 20px wide on the right and left, and 30px wide on the bottom, sliced into 30px-wide pieces, and stretched to fill the border area:

border-image: url('my-border-image.png') 30 stretch 10px 20px 30px / 50% stretch;

Use a border image that is 10px wide on the top, 20px wide on the right, 30px wide on the bottom, and 40px wide on the left, sliced into 30px-wide pieces, and repeated to fill the remaining space:

border-image: url('my-border-image.png') 30 repeat 10px 20px 30px 40px / 50% repeat;

Values

The border-image property is a shorthand property that allows you to specify the following values in a single declaration:

Here is a table of the possible values for each of the border-image sub-properties:

Best Practices

• Use the border-image property to specify the properties border-image-source, border-image-slice, border-image-repeat, and border-image-width in a single declaration.
• Use the border-image-source property to specify the image to use for the border. Make sure to use a high-quality image that looks good at different resolutions and screen sizes.
• Use the border-image-slice property to specify how the image should be sliced into pieces to form the border. Use a value that accurately reflects the layout of the image, and consider using the fill keyword to automatically fill in any remaining areas.
• Use the border-image-repeat property to specify how the image should be repeated to fill the remaining space in the border. You can choose from the stretch, repeat, round, and space values, depending on your desired effect.
• Use the border-image-width property to specify the width of the border image. You can use a length value in pixels, or a percentage value that is relative to the element's width.
• Be aware that the border-image property is not supported in all browsers, so you may need to use a polyfill or fallback to using other methods for creating borders if you need to support older browsers.
• You can use the border-image property in combination with other border properties, such as border-width and border-color, to create more complex border styles. For example, you might use a solid color border with a smaller width, and then use a border image with a larger width to add a decorative effect on top of the solid border.
• When using the border-image property, make sure to test your border styles on different screen sizes and resolutions to ensure that the border looks good on all devices.

Browser Compatibility

Note that support for the border-image property is limited in Internet Explorer 10 and earlier.