CSS ਕਿਨਾਰਾ ਚਿੱਤਰ

CSS ਕਿਨਾਰਾ ਚਿੱਤਰ

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

CSS border-image property

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

The property has three parts:

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

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

border-image The property accepts an image and slices 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 work, 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!

This 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!

This is the code:

example

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

try it yourself

Tip:border-image The 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 will 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;

This 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 properties

property description
border-image border-image-* attributes k layk layk properties k short form layk
border-image-source dey koi border k liay waal k imaj k path
border-image-slice border-image-slice
border-image-width border-image-width
border-image-outset border-image-outset
border-image-repeat border-image-repeat