CSS AdvancedLesson 50Free preview

CSS Border Images

This lesson is part of CSS · All levels

Summary

Border image allows us to use images as a frame of an element, not a regular solid line. The image is cut into a corner and a center, and then repeated or sliced as needed. This feature is useful for decorative frames such as panels with ornaments around their corners.

Key points

`border-image-source` defines the image used as a frame
`border-image-slice` divides the image into 9 parts (4 angles, 4 sides, 1 center)
`border-image-width` regulates the thickness of the frame area, `border-image-outset` can extend it beyond the border
`border-image-repeat` supports `stretch`, `repeat`, and `round`

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.