Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Border Images

10 minutes

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Border Images

CSS border-image Property

The CSS border-image property permits the specification of an image for the border of an element, replacing the default border.

This property consists of three components:

The image designated for the border.
Determining the slicing points of the image.
Defining whether the middle sections should repeat or stretch.

We’ll employ the provided image (named “border.png”) for this purpose.

The border-image property divides the image into nine sections akin to a tic-tac-toe board. Subsequently, it positions the corners at the element’s corners, while the middle sections are either repeated or stretched based on your specifications.

Note: To enable border-image functionality, the element must also have the border property defined.

In this case, the border is formed by repeating the middle sections of the image.

Below is the provided code:

Example

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

In this instance, the border is generated by stretching the middle sections of the image.

The following is the code snippet:

Example

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

Tip: The border-image property functions as a shorthand for the border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.

CSS border-image – Different Slice Values

Varying slice values drastically alter the appearance of the border.

Illustration 1:

Illustration 2:

Illustration 3:

Below is the provided 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;
}