Use an image as a border | Css

 /* You have 3 options for the type of border (repeat / round / stretch) */
bordered-image {
    border-width: 20px;
    -moz-border-image: url(border.png) 30 30 stretch;
    -webkit-border-image: url(border.png) 30 30 stretch;
}

Download Next
AI Explanation

This CSS code is for styling an element with a custom border image. Here's an explanation of the code: 1. `border-width: 20px;`: This line sets the width of the border around the element to 20 pixels. 2. `-moz-border-image: url(border.png) 30 30 stretch;`: This line specifies the border image to be used for Mozilla Firefox browsers. It uses the `url()` function to specify the path to the image file (`border.png`). The `30 30` values indicate the amount by which the image should be sliced before repeating (in this case, 30 pixels from the top and left sides), and `stretch` indicates that the image should be stretched to fit the border. 3. `-webkit-border-image: url(border.png) 30 30 stretch;`: This line specifies the border image to be used for WebKit-based browsers (like Chrome and Safari). It uses the same image file as above (`border.png`) and the same slicing values (`30 30`) with the `stretch` option. Overall, this code sets a custom border image for the element using the `border.png` file and slices it to fit the border with stretching. The specific slicing values and stretching behavior can be adjusted based on your design needs.