Search within TutorialsPark

CSS Border-Image


Use CSS border-image to create custom borders with images


CSS Border-Image

1. You need not confine yourself to borders created using border-style property, you can create custom borders with images using CSS border-image property

2. Individual aspects of the border-image can be configured using five properties as given below.

Tables: Properties of CSS Border-Image

Property Description value
border-image-source Specifies the location of the image to be used for borders none
url(image-location)
border-image-slice Specifies the inward offset of each side of the border image number
percent
fill
border-image-width Specifies the width of the elements border number
percent
auto
border-image-outset Specifies the area beyoond the beyond the border to be used to display the border image length
percent
border-image-repeat Specifies the way the slices are scaled and tiled for horizontal and vertical edges stretch
repeat
round
border-image Shorthand to set multiple properties in a single declaration
Same as individual properties


Specify border Image and its slices

1. You can specify the image to be used for border using the CSS property border-image-source, the path of the image is specified using url() method.

2. You can specify the slicing pattern for the border image using CSS property of border-image-slice .

border-image-slice-image

3. The border-image-slice property slices the border image into nine slices, four corners, four edges and middle part.

4. To slice the image you should provide insets for the top, right, bottom and left edges of the image. Four values can be provided, one for each edge, even if some are not specified they are inferred from the other values like other 4-value syntax of CSS(eg. margin, padding etc).

Example: CSS Border Image source and slices

Give it a TRY! » Note: The centre part of the image is discarded, but even that can be preserved using fill keyword fill as a sides value.


Setting the width of the Border Images

Demo: CSS Border Image Shorthand

I have never let my schooling interfere with my education.

border-image-width:


Source Image

border-image

1.The width of the border image slices can be set using border-image-width property

2.It can take upto four values, one for each side and even if some values are not specified they are inferred from the other values like other 4-value syntax of CSS(eg. margin, padding etc).

3. The value can be specified in length, percentages and numbers

CSS Example : border-image-width property

Give it a TRY! » Note: border-image-width specifies the width of slices and not the border, you can set the border-width using CSS.


Specifying the fill type for border image slice

Demo: CSS Border Image Repeat Pattern

I have never let my schooling interfere with my education.

border-image-repeat:


1.Border Image slices are stretched inorder to fill the gap in between the corners of the frames using border-image-repeat property.

2. The way to handle the image slices can be specified using keywords.

stretch : The slice gets stretched to fill the available space. It the default value.

repeat : The slice gets repeated from the center of the side to fill the space(can create fragments).

round : The slice gets stretched and repeated to fill the space (no fragments are created).

space : The slice is repeated exact number of times to fill the gap, extra space is divided equally to created a gap between individual tiles

3. You can specify seperate keywords for each four sides or one , two or three values just like other 4 valued properties(i.e margin, padding etc)

Example: CSS border-image-repeat

Give it a TRY! »


CSS Border Image Shorthand

I have never let my schooling interfere with my education.

border-style:


1.You specify all the border image properties in a single declaration using shorthand border-image .

2. Syntax for CSS border-image shorthand

border-image : source slice / width / outset repeat;

3. In border-image shorthand only the property source and slice are compulsory rest all other are optional.

Example: CSS shorthand border-image

Give it a TRY! »