Imágenes de borde de CSS

Imágenes de borde de CSS

By using CSS border-image This property can be used to set an image as the border around an element.

CSS border-image property

CSS border-image This property allows you to specify the image to be used instead of the normal border.

This property has three parts:

  • The image used as the border
  • Where to slice the image
  • Define whether the middle part should be repeated or stretched

We will use this image ("border.png")

border-image This property accepts an image and cuts it into nine parts, like a tic-tac-toe board. Then, the corners are placed at the corners, and the middle part is repeated or stretched according to your settings.

Note:To make border-image to take effect, the element also needs to be set border Property!

Here, the middle part of the repeated image is used to create the border:

Image as border!

Here is the code:

Example

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Try It Yourself

Here, the middle part of the image is stretched to create the border:

Image as border!

Here is the code:

Example

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Try It Yourself

Tip:border-image This property is actually a shorthand for the following properties:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - Different Slice Values

Different slice values can completely change the appearance of the border:

Example 1:

border-image: url(border.png) 50 round;

Example 2:

border-image: url(border.png) 20% round;

Example 3:

border-image: url(border.png) 30% round;

Here is the code:

Example

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Try It Yourself

CSS Border Image Property

Property Description
border-image A shorthand property for setting all border-image-* properties.
border-image-source Define the path of the image used as the border.
border-image-slice Especifica cómo se recortará la imagen de borde.
border-image-width Especifica el ancho de la imagen de borde.
border-image-outset Especifica la cantidad de área de la imagen de borde que sobrepasa el cuadro del borde.
border-image-repeat Especifica si la imagen de borde debe repetirse, redondear o estirarse.