CSS Border Image

Prev
Next
CSS Border image

CSS Border Image

Normally, it is required to set normal borders around the HTML elements but borders can be made even more attractive and fancy using Images.

This can be done using CSS border-image property.

Example of Border Image

CSS Border Image - Here, elements are surrounded with borders in form of image

CSS border-image property is the shorthand for border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.

The image-source is mandatory because this provides the location of the image and others are optional.

Sometimes, you are also required to give-

  • Value of border-image-slice which is a way to tell, how to chop(cut) the image. It can be in %, numeric etc.
  • Value of border-image-repeat – This is a way to tell whether the image used for the border should be repeated along the border, or stretched(spread) along the border, or rounded to rescale the image in such a way that it repeats to properly fit along etc.
On fewer occasions, we also provide –
  • border-image-width – To provide the width of the image along the border
  • border-image-outset – To provide the width outside the border image to spread the border space around the region

Note:
It is good practice to use a very small image  for image border because of 2 reasons:

a) It saves a lot of space as compared to bigger images

b) Anyways, you can use a border-image property to use it around the element. You will understand all these as study further. 

different types of CSS border image properties

Example of different types of border image properties

#shorthand_border_imagec {
  border: 20px solid transparent;
  border-image: url(img/shorthand_border_image_property.jpg) 40% round;
}
#shorthand_border_imaged {
  border: 10px solid transparent;
  border-image: url(img/shorthand_border_image_property.jpg) 30% stretch;
}

#shorthand_border_imagee {
  border: 20px solid transparent;
  border-image: url(img/shorthand_border_image_property.jpg) 35% repeat;
}

#shorthand_border_imagef {
  border: 20px solid transparent;
  border-image: url(img/shorthand_border_image_property.jpg) 10;
}

#shorthand_border_imageh {
  border: 30px groove transparent;
  border-image: url(img/shorthand_border_image_property.jpg);
}
Run the Code

Instead of shorthand border-image property, sometimes we use individual border-image properties like –

a) border-image-source – It is the location of the image

The Syntax of border-image-source property:
border-image: url(image_location)

Example: border-image:url(boy.png);

b) border-image-slice – It defines how the image will be chopped or cut. Normally, an image is chopped into 9 sections. These include 4 corners at the borders, 4 edges along the borders and 1 middle portion.

Syntax of border-image-slice property:

border-image-slice:x%|x|fill|initial
where x can be a numeric value.

Example:

  • border-image-slice:20%;
  • border-image-slice:30;
  • border-image-slice:fill;

c) border-image-width

Syntax of border-image-width property:
border-image-width:xunits | % | initial |  auto |numeric

where units can be like px,em etc

Example:

  • border-image-width:20%;
  • border-image-width:2;
  • border-image-width:10px;
  • border-image-width:auto;
  • border-image-width:initial;

d) border-image-outset

The Syntax of border-image-outset property:
border-image-outset:xunits | % | initial |  numeric

where units can be like px,em etc

Example:

  • border-image-outset:20%;
  • border-image-outset:2;
  • border-image-outset:initial;
  • border-image-outset:20px;

e) border-image-repeat

Syntax of border-image-repeat property:
border-image-repeat:repeat;
border-image-repeat:round;
border-image-repeat:stretch;
border-image-repeat:initial;
border-image-repeat:inherit;
border-image-repeat:space;

Example

#individual_border_image {
    border: 15px solid transparent;
    border-image-source: 
    url(img/image_border.jpg);    
    border-image-slice: 20%;
    border-image-width: 12px;  
    border-image-repeat: repeat;
    border-image-outset: 10px;
    padding: 15px;
}
Run the Code

CSS Interview Question and Answers

We can create rounded images using CSS border-radius property. This property renders image corner to round.

Example to make rounded image.

<!DOCTYPE html>
<html>
<head>
<style>
img {
  border-radius: 50%;
}
</style>
</head>
<body>

<img src="cartoon.jpg" alt="cartoon" style="width:300px">

</body>
</html>

CSS border-image property is the shorthand for:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
Prev
Next
Youtube Facebook-f Twitter

Tutorials for all brains!